js事件详解——事件流，事件处理，事件对象

最新推荐文章于 2022-03-28 23:04:14 发布

bymyself11

最新推荐文章于 2022-03-28 23:04:14 发布

阅读量332

点赞数

分类专栏： js

本文链接：https://blog.csdn.net/bymyself11/article/details/51066898

版权

js 专栏收录该内容

9 篇文章 0 订阅

订阅专栏

1.事件流

描述的是在页面中接受事件的顺序

接受事件的顺序有两种方式：

（1）事件冒泡：由最具体的元素接收，然后逐级向上传播到最不具体的元素节点

（2）事件捕获：最不具体的节点到最具体的元素。

2.事件处理

(1)HTML事件处理：

直接添加到HTML结构中

(2)DOM0级事件处理：

把一个函数赋值给一个事件处理程序属性

(3)DOM2级事件处理：

addEventListener("事件名"，“事件处理函数”，“布尔值”)；

true:事件捕获

false:事件冒泡

removeEventListener();

(4)IE事件处理程序

attachEvent

detachEvent

事件处理事例代码如下：
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>事件处理</title>
</head>
<body>
<button οnclick="change()">button</button>
 <button id="btn1" >button1</button>
<button id="btn2">button2</button>
<button id="btn3">button3</button>

 <script>
     function change() {
         alert("1.HTML事件处理")
     }
 </script>
<script>
    var x=document.getElementById("btn1");
    x.οnclick=function () {
        alert("2.DOM0级操作1");//被覆盖
    }
    x.οnclick=function (){
        alert("2.DOM0级操作2")//覆盖了上面的输出
    }
</script>

<script>
     var y=document.getElementById("btn2");
     y.addEventListener("click", click1);
     y.addEventListener("click",click2);
     y.removeEventListener("click",click1);
    function click1() {
        alert("3.DOM2级事件处理1");

    }
    function click2() {
        alert("3.DOM2级事件处理2");//不会覆盖上面的输出
    }
</script>

<script>
    //不同浏览器处理不同事件的问题
    var btn3=document.getElementById("btn3");
    if(btn3.addEventListener){//如果支持evenListener事件
        btn3.addEventListener("click" ,clik);
    }else if(btn3.attachEvent){
        btn3.attachEvent("onclick",clik);
    }else{

        btn3.οnclick=clik();
    }
    function clik() {
        alert("hello world")
    }
</script>
</body>
</html>

3.事件对象

（1）事件对象：

在触发DOM事件的时候都会产生一个对象
（2）事件对象event

type：获取事件类型

target:：获取事件目标

stopPropagation():阻止事件冒泡

preventDefault():阻止事件默认行为

事件对象事例代码如下：
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>事件对象</title>
</head>
<button id="btn1">按钮1</button>
<div id="div">
    <button id="btn2">按钮2</button>
</div>

<a  id="aid" href="http://www.baidu.com">baidu</a>
<body>
<script>
    var btn1=document.getElementById("btn1");
    btn1.addEventListener("click",hello);
    function hello(event) {
        alert(event.type);//获取事件的类型。
        alert(event.target);//获取事件目标（目标为触发事件的对象
    }
</script>
<script>
    var btn2=document.getElementById("btn2");
    btn2.addEventListener("click",world1);
    var div=document.getElementById("div");
    div.addEventListener("click",world2);
    function world1(event) {
        alert("fffffff");
        event.stopPropagation();//阻止冒泡排序则下面函数world2()不会有输出

    }
    function world2() {
        alert("jjjjjjj");

    }
</script>

<script>
    var aid=document.getElementById("aid");
    aid.addEventListener("click",a)
    function a(event) {
        event.preventDefault();//阻止默认操作则链接不会跳转。
    }
</script>
</body>
</html>