一、事件
HTML 事件是发生在 HTML 元素上的事情。
当在 HTML 页面中使用 JavaScript 时, JavaScript 可以触发这些事件。
事件通常与函数配合使用,这样就可以通过发生的事件来驱动函数执行。
1、鼠标移入移出事件
(1)onmouseover 和 onmouseout
- onmouseover:在鼠标指针移动到元素上时触发
- onmouseout :在鼠标指针移出元素后触发
(2)onmouseenter 和 onmouseleave
- onmouseenter:在鼠标指针进入到元素上时触发
- onmouseleave :在鼠标指针离开元素后触发
上面的两组事件都可以实现鼠标移入和移出,有什么区别吗?
二者的本质区别在于,mouseenter不会冒泡,简单的说,它不会被它本身的子元素的状态影响到。但是mouseover就会被它的子元素影响到,在触发子元素的时候,mouseover会冒泡触发它的父元素.(想要阻止mouseover的冒泡事件就用mouseenter)
共同点:当二者都没有子元素时,二者的行为是一致的,但是二者内部都包含子元素时,行为就不同了。
2、获得、失去焦点
onfocus 获取焦点事件:在鼠标光标获取输入框焦点时触发
onblur 失去焦点事件:在鼠标光标失去焦点时触发。
3、鼠标单击和双击事件
onclick 单击事件:在鼠标指针单击时触发
ondblclick 双击事件:在鼠标光标双击时触发。
4、键盘键按下、抬起事件
onkeydown:键盘按下
onkeyup:键盘抬起
5、DOM0和DOM2事件
DOM0就是普通的绑定事件的方式,DOM2是采用事件监听的方式。DOM0级事件元素绑定多个click最后只执行最后一个click。DOM2级事件元素绑定多个click,都要执行。
(1)DOM0事件
对同一个按钮绑定两次单击事件,只会执行第二个事件
btn.onclick = function(){
alert(1)
}
btn.onclick = function(){
alert(2)
}
(2)DOM2事件
对同一个按钮绑定两次事件,这两个事件都会执行
btn.addEventListener(‘click’,function(){
alert(1)
});
btn.addEventListener(‘click’,function(){
alert(2)
});
(3)事件解绑
DOM0事件解绑的方式:btn.onclick = null;
DOM2事件解绑的方式:btn.removeEventListener(‘click’,function);
6、事件对象(event)
什么时候会产生Event 对象呢?
例如: 当用户单击某个元素的时候,我们给这个元素注册的事件就会触发,该事件的本质就是一个函数,而该函数的形参接收一个event对象。
Event 对象代表事件的状态,比如事件在其中发生的元素、键盘按键的状态、鼠标的位置、鼠标按钮的状态。
在触发的事件的函数里面我们会接收到一个event对象,通过该对象我们需要的一些参数,比如说我们需要知道此事件作用到谁身上了,就可以通过event的属性target来获取到(IE暂且不谈),或者想阻止浏览器的默认行为可以通过方法preventDefault()来进行阻止.以下是event对象的一些属性和方法
事件对象的兼容性写法:
7、事件冒泡和捕获
(1)事件冒泡
假如用户单击了一个元素,该元素拥有一个click事件,那么同样的事件也将会被它的祖先触发,这个事件从该元素开始一直冒泡到DOM树的最上层,这一过程称为事件冒泡。
阻止事件冒泡的方法:
e.stopPropagation();
谷歌和火狐支持,
window.event.cancelBubble=true;
IE特有的,谷歌支持,火狐不支持
(2)事件捕获
事件捕获和事件冒泡是相反的,也就是说,当用户触发了一个事件的时候,这个事件是从DOM树的最上层开始触发一直到捕获到事件源.
8、事件源
在事件中,当前操作的那个元素就是事件源。比如网页元素中a标签有onclick事件,当点击a发生onclick事件时,事件源就是a标签。
获取事件源:event.target
通过事件源给新增元素添加样式:
二、属性
1、自定义属性
我们写的标签,除了可以用元素本身已有的属性外,也可以对其添加程序员自己创建的属性哦。比如给下面的div添加一个money属性(它自身没有)。通过 setAttribute(属性,值)
来创建属性,通过 getAttribute(属性,值)
来获取属性。
移除自定义属性:removeAttribute(属性,值)
此外,还有别的方式可以设置属性:
- setProperty : DOM.style.setProperty(“属性”,”值”)
- cssText : DOM.style.cssText = “属性:值;属性:值;…”;
- DOM.style.‘属性名’= 值;
- DOM.属性=’值’:设置标签已有的属性值,不可以自定义属性