Loading...
冒泡机制(event)当一个元素上的事件被触发的时候,比如说鼠标点击了一个按钮,同样的事件将会在那个元素的所有祖先元素中被触发。这一过程被称为事件冒泡;这个事件从原始元素开始一直冒泡到DOM树的最上层。简言之:子元素事件被触动,父盒子的同样的事件也会被触动。事件传播阶段事件传播的三个阶段是:捕获、冒泡和目标阶段事件捕获阶段:事件从最上一级标签开始往下查找,直到捕获到事件目标(target)。...
事件描述window.onscroll屏幕滑动window.onresize浏览器大小变化window.onload页面加载完毕div.onmousemo...
Width和heightclientWidth = width + paddingclientHeight = height + paddingoffsetWidth = width + padding + borderoffsetHeight = height + padding + borderscrollWidth = 内容宽度(不包含border)scrollHeig...
clientWidth和clientHeightclientWidth 获取网页可视区域宽度(两种用法)clientHeight 获取网页可视...
描述:由于浏览器的渲染内核不一样,当页面过长或者过宽的时候,出现的滚动条的样式不一致,所以我们可以自己写滚动条。当文字过多的时候,就会出现滚动条,滚动条的宽度和内容的多少成反比。用户可以通过拖拉滚动条的方式查看全部内容。实现代码:<!DOCTYPE html> <html lang="en"> <head> <meta c...
描述:用户在弹出窗口的特定区域点击鼠标左键之后,可以对弹出的窗口进行拖拉,鼠标移开之后,窗口固定在最终的位置,点击关闭按钮,就可以关闭弹出的窗口。实现代码...
描述:当用户放在某张图片上的某一位置的时候,该区域在另外的地方进行放大。鼠标离开恢复原状,类似淘宝的查看商品的大图。原理:准备两张等比例的图片,小的图片是用来正常显示,大的图片用一个小的盒子包起来,多余的地方进行隐藏。鼠标在小图片那个盒子里移动的时候,移动的距离与大盒子图片移动的距离成正比。实现代码:<!DOCTYPE html> <html lang="en&q...
描述:获取鼠标在页面中某个盒子的位置。当用户鼠标放在页面中的任意一个盒子的时候,可以获取鼠标在该盒子中的具体位置,鼠标离开之后显示为0;原理:鼠标的位置减...
描述:当用户点击页面的任意位置的时候,让控制的部件缓慢移动到该位置。实现代码:<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>鼠标跟随</title> <sty...
描述:再触发DOM上的某个事件时,会产生一个事件对象event,这个对象中包含着所有与事件有关的信息。所有浏览器都支持event对象,但支持的方式不同。比...