06 JS的事件（Event）

最新推荐文章于 2022-04-25 15:33:41 发布

原创最新推荐文章于 2022-04-25 15:33:41 发布 · 330 阅读

3 ·

CC 4.0 BY-SA版权

文章标签：

#js事件 #javascript event对象

javascript入门笔记专栏收录该内容

13 篇文章

订阅专栏

本文详细介绍了DOM事件的概念，包括事件触发的场景、事件监听的不同方法及其区别，并深入探讨了事件捕获与冒泡的过程，以及如何阻止事件传播和默认行为。

1、事件介绍

事件：用户的行为所触发的效果，DOM使JavaScript有能力对HTML事件做出反应。

HTML事件例子：

当用户点击鼠标时；

当网页已加载时；

当图像已加载时；

当鼠标移动到元素上时；

当输入文字改变时；

当提交的HTML表单时；

当用户触发按键时

常见事件：

2、监听事件

监听函数是事件发生时，程序所要执行的函数。它是事件驱动编程模式的主要编程方式。DOM提供三种方法，可以用来为事件绑定监听函数。

HTML点击事件：HTML语言允许在元素标签的属性中，直接定义某些事件的监听代码。

DOM 0级事件：元素节点由事件属性，可以监听函数。

DOM 2级事件：定义事件的监听函数。

3种方式的区别：

方式1：监听函数后面覆盖前面。

<body>
    <div id="div2"style="background-color:orange;width:100px;height:100px;"onclick="click1()"div>
</body>
<script>
    function click1(){
        alert("click1");
    }
    function click1(){
        alert("click1-1");
    }
   // click1-1
</script>

方式2：相同的事件监听函数定义，后面的覆盖前面的。

<body>
    <div id="div1"style="background-color:orange;width:100px;height:100px;"></div>
</body>
<script>
    vardiv1 = document.getElementById("div1");
    div1.onclick= function () {
        alert("click1");
    }
    div1.onclick= function () {
        alert("click2");
    }
    // click2 
</script>

方式3：相同的事件监听函数的定义不会产生覆盖

<body>
    <div id="div1"style="background-color:orange;width:100px;height:100px;"></div>
</body>
<script>
    div1.addEventListener("click",function() {
        alert("click1");
    },false);
    div1.addEventListener("click",function() {
        alert("click2");
    },false);
    //click1 click2
</script>

2.1事件捕获&冒泡

事件捕获：当你使用事件捕获时，父级元素先触发，子级元素后触发，即div先触发，p后触发。

事件冒泡：当你使用事件冒泡时，子级元素先触发，父级元素后触发，即p先触发，div后触发。

W3C模型：默认是事件冒泡，直到到达document。

程序员可以自己选择绑定事件时采用事件捕获还是事件冒泡，方法就是绑定事件时通过addEventListener函数，它有三个参数，第三个参数若是true，则表示采用事件捕获，若是false，则表示采用事件冒泡。

ele.addEventListener('click',doSomething2,true)

true=捕获

false=冒泡

<body>
    <div id="div1" style="background-color: orange;width:100px;height: 100px;">
        <div id="div2" style="background-color: darkgoldenrod;width:40px;height: 40px;"></div>
    </div>
</body>
<script>
    // test1:默认是事件冒泡
    var div2 = document.getElementById("div2");
    div2.onclick = function () {
        alert("里面");
    }
    var div1 = document.getElementById("div1");
    div1.onclick = function () {
        alert("外面");
    }
    //点击div2 -- > 里面，外面

    //test2:事件捕获
    var div2 = document.getElementById("div2");
    div2.addEventListener('click',function () {
        alert("里面")
    },true);
    var div1 = document.getElementById("div1");
    div1.addEventListener('click',function () {
        alert("外面")
    },true);
    //点击div2  -- > 外面, 里面
    //点击div1  -- > 外面

    //test3:事件冒泡
    var div2 = document.getElementById("div2");
    div2.addEventListener('click',function (event) {
        alert("里面");
    },false);
    var div1 = document.getElementById("div1");
    div1.addEventListener('click',function () {
        alert("外面");
    },false);
    //点击div2  -- > 里面，外面
    //点击div1  -- > 外面
</script>

2.2阻止事件传播

• 在W3c中，使用event.stopPropagation（）方法
在捕获的过程中stopPropagation（）；后，后面的冒泡过程也不会发生了~

见《javaScript Event》的描述。。。

Ps:在IE下设置cancelBubble = true；【老版的IE】

2.3阻止事件默认行为

使用event.stopPropagation（）方法

3、JavaScript event

事件发生以后，会生出一个事件对象，作为参数传给监听函数。浏览器原生提供一个Event对象，所有的事件都是这个对象的实例，或者说继承了Event.prototype对象。

3.1获取需要的参数

举例：使用console.log(event)输出鼠标点击事件。

常用的参数有：

表示鼠标距离屏幕左上角的位置：screenX、screenY

clientX、clientY：表示鼠标距离浏览器窗口左上角的位置（与页面是否横向滚动无关）

有垂直滚动条时，相对于垂直滚动条滑到顶部的左上角的位置

3.2Event常用属性和方法

（1）target属性：返回触发事件的那个节点，即事件最初发生的节点。

（2）preventDefault方法：取消浏览器对象当前事件的默认行为，比如点击链接，浏览器跳转到指定页面，或者按一下空格键，页面向下滚动一段距离。

（3）stopPropagation方法：阻止事件在DOM中继续传播，防止触发定义在别的节点上的监听函数，但不包括当前节点上新定义的事件监听函数。

还有其他属性：可自行通过console.log查看。

应用1：阻止浏览器默认行为

 <a href="http://www.baidu.com">跳转到百度</a>
</body>
<script>
    //阻止浏览器默认行为
    var aObj = document.getElementsByTagName("a")[0];
    aObj.onclick = function(event){
        alert("a")
        event.preventDefault();
    }
    //没有跳转到百度
</script>

应用2：阻止事件的传播

<body>
    <div id="div1" style="background-color: orange;width:100px;height: 100px;">
        <div id="div2" style="background-color: darkgoldenrod;width:40px;height: 40px;">
        </div>
    </div>
</body>
<script>
    //阻止事件的传播
    var div2 = document.getElementById("div2");
    div2.addEventListener('click',function (event) {
        alert("里面");
        event.stopPropagation();
    },false);

    var div1 = document.getElementById("div1");
    div1.addEventListener('click',function () {
        alert("外面")
    },false);
    //点击div2  -- > 里面
    //点击div1  -- > 外面
</script>

应用3：获取当前节点的信息

<body>
    <a href="http://www.baidu.com">跳转到百度</a>
</body>
<script>
    //获取当前节点的信息
    var aObj = document.getElementsByTagName("a")[0];
    aObj.onclick = function(event){
        alert("a")
        event.target.innerHTML = "跳转到百度开发者平台";
        event.target.href="https://app.baidu.com/";
    }
</script>

ps：<a href="http://www.baidu.com"onclick="javascript:void(0)">跳转到百度</a>
javascript:void（0）

void是无返回值的操作，点击这个时候没有任何反应。而且如果在a标签中，如果href="#"，点击后会回到网页顶部，javascript:void(0)会没有任何反应