JavaScript:事件、属性

一、事件

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(属性,值)来获取属性。
因为div并没有money这个属性
在这里插入图片描述

移除自定义属性:removeAttribute(属性,值)

此外,还有别的方式可以设置属性:

  • setProperty : DOM.style.setProperty(“属性”,”值”)
  • cssText : DOM.style.cssText = “属性:值;属性:值;…”;
  • DOM.style.‘属性名’= 值;
  • DOM.属性=’值’:设置标签已有的属性值,不可以自定义属性

猜你喜欢

转载自blog.csdn.net/qq_41504815/article/details/114539532