事件对象、事件的绑定与传播以及阻止默认事件

最新推荐文章于 2022-06-28 15:46:26 发布

bettercat

最新推荐文章于 2022-06-28 15:46:26 发布

阅读量242

点赞数

文章标签： javascript js html5

本文链接：https://blog.csdn.net/sd6022/article/details/107735273

版权

事件本质是一个对象，触发DOM上的某个对象时，会产生一个事件对象event

box.onclick = function (e) { }

上面的监听器（函数），当事件发生时，浏览器会帮我们调用这个函数。
浏览器在调用函数时，会进行参数的传递，浏览器会把一个对象传递到这个函数中。
e是形参，e就接收了这个对象，这个对象，我们叫事件对象。
e是一个事件对象浏览器调用监听器是，传递的一个对象。

事件对象中浏览器调用监听器传递的实参，e仅仅是形参，也就是说形参命名随便写，通常.我们会写e,event,ev…

事件对象本质也是一个对象，里面默认有非常多的属性和方法。

HTML0级别的事件绑定

<button οnclick=“function()”">xxx

DOM0级别的事件绑定

btn.onclick = function(){} 基本属性赋值

DOM2级别的事件绑定

btn.addEventLisener() 基于事件池机制

事件默认会流动，也就是你给son绑定事件，father上面的事件也会触发。
默认情况下，它是从里向外流动，这种流动方式，叫冒泡。

on.onclick = function () {
     console.log("son...")
        }
box.onclick = function () {
     console.log("box...")
        }

可以修改它的流动方式，从外向里流动，叫捕获。
把事件冒泡修改成事件捕获

box.addEventListener("click",()=>{
console.log("box...")},true)
on.addEventListener("click",()=>{
console.log("son...") },true)

使用DOM0形式进行事件绑定，只能冒泡，不能捕获。

一些标签有默认的事件：

a     点击事件    当我们给它添加了事件  默认事件和写入的事件都会触发
form  提交事件

阻止默认事件

1)使用href="javascript:;

<a href="javascript:;">使用href="javascript:;</a>

2）利用事件对象阻止默认事件：

    a.onclick = function (e) {
                e.preventDefault() // 阻止默认事件
            }

3）在监听器最后面写个return false;

a.onclick = function (e) {
return false;
 }

form也有默认事件，这个事件叫提交事件

这是我们自己写的提交事件, 同时form也有一个默认的提交事件

form.onsubmit = function () {
console.log("提交了... ")
}

阻止默认事件：

e.preventDefault() // 阻止默认事件
a.onsubmit = function (e) {
 return false;
}

关注