web-js总结（7）

最新推荐文章于 2024-09-11 15:33:18 发布

YoungManxia

最新推荐文章于 2024-09-11 15:33:18 发布

阅读量91

点赞数

文章标签： javascript html html5

本文链接：https://blog.csdn.net/YoungManxia/article/details/120449263

版权

学习目标：

1.注册事件
2.解绑事件（删除事件）
3.dom事件流
4.事件对象
5.常见的事件对象属性和方法
6.事件对象阻止默认行为
7.阻止事件冒泡的两种方式
8.事件冒泡带来的事件委托
9.禁止选中文字和禁用右键
10鼠标事件对象

学习内容：

1.注册事件
1.事件监听注册事件，里面的类型是字符串，加引号，不带on例如onclick在addEventListenner（‘click’，function（）{}）
2.同一元素采用这种方式可以添加多个监听器
3.IE9以前的浏览器不支持addEventListenner，采用attachEvent（‘click’，function（）{}）

<body>
    <button>传统</button>
    <button>方法监听注册事件</button>
    <button>123</button>
    <script>
        var btns = document.querySelectorAll('button')
        btns[0].onclick = function () {
            alert('hi')
        }
        //事件侦听注册事件
        //里面的类型是字符串，加引号，不带on
        //同意元素同一事件可添加多个监听器
        btns[1].addEventListener('click', function () {
            alert(22)
        })
        btns[1].addEventListener('click', function () {
            alert(33)
        })
        //attachEvet IE9以前版本
        btns[2].attachEvent('onclick', function () {
            alert(11)
        })
    </script>
</body>

2.解绑事件（删除事件）
1.传统的方式解绑事件，在事件执行函数内将事件=null例如：div.οnclick=null
2.采用addEventListener（‘click’，fn）里面的fn调用不用加小括号，解绑事件采用removeEventListener（‘click’，fn）

<body>
    <div>1</div>
    <div>2</div>
    <div>3</div>
    <script>
        //传统方式解绑事件
        var divs = document.querySelectorAll('div')
        divs[0].onclick = function () {
            alert(11)
            divs[0].onclick = null
        }
        divs[1].addEventListener('click', fu)//里面的fn不需要加小括号
        function fu() {
            alert(22)
            divs[1].removeEventListener('click', fu)
        }
        //3
        divs[2].addEventListener('onclick', fn1)
        function fn1() {
            alert(33)
            divs[2].detachEvent('onclick', fn1)
        }
    </script>
</body>

3.dom事件流
1.dom事件流三个阶段
1）js代码只能执行捕获或者冒泡其中一个阶段
2）onclick和attachEvent（e）只能得到冒泡阶段
3）捕获阶段只有addEventListener（）第三个参数为true时，处于捕获阶段.
4）捕获阶段事件获取顺序为document->html->body->father->son
5)冒泡阶段如果addEventListener第三个参数为false或者空则处于冒泡阶段，此时事件顺序为son->father->body->html->document
6）有些事件没有冒泡

 <div class="father">
        <div class="son">son盒子</div>
    </div>
    <script>
        //dom事件流三个阶段
        //js代码中只能执行捕获或者冒泡其中的一个阶段
        //onclick、和attrachEvent(ie)只能得到冒泡阶段
        //捕获阶段如何addEvementListener第三个参数时true，那没则处于捕获阶段 document->html->body->father->son
        //事件流描述页面接收事件的顺序
        //事件发生时会在元素节点之间按照特定顺序传播，这个过程叫dom事件流
        //捕获阶段，当前目标阶段，冒泡阶段 
        // var son = document.querySelector('.son')
        // son.addEventListener('click', function () {
        //     alert('son')

        // }, true)
        // var father = document.querySelector('.father')
        // father.addEventListener('click', function () {
        //     alert('father')

        // }, true)
        //冒泡阶段如何addEvementListener第三个参数时false或者空，那没则处于冒泡 son->father->body->html->document
        var son = document.querySelector('.son')
        son.addEventListener('click', function () {
            alert('son')

        })
        var father = document.querySelector('.father')
        father.addEventListener('click', function () {
            alert('father')

        })
        document.addEventListener('click', function () {
            alert('document')
        })
        //有写事件没有冒泡：
    </script>
</body>

4.事件对象
1）event就是一个事件对象，写到我们监听函数小括号内，当形参来看。
2）事件对象只有有了事件才会存在，是系统自动创建的，不需要我们传递实参。
3）事件对象是关于事件的一系列相关数据的集合，跟事件相关，比如鼠标事件，包含鼠标相关信息，鼠标坐标等。如果是键盘事件，就包含键盘事件信息，比如判断用户按下了哪些键。
4）IE9以下的浏览器不支持，需要调用windows.event来获取事件相关信息。

<body>
    <div>123</div>
    <script>
        var div = document.querySelector('div')
        //1.event 就是一个事件对象，写到我们监听函数小括号内，当形参来看
        //2.事件对象职业有了事件才会存在，他时系统给我们自动创建的，不需要我们传递实参
        //3.事件对象时我们事件一系列相关数据的集合，跟事件相关，比如鼠标相关信息，鼠标坐标，如果时键盘事件，就包含了键盘事件信息，比如判断用户按下了那些键
        // div.onclick = function (event) {

        //     console.log(event);
        // }
        // div.addEventListener('click', function (event) {
        //     console.log(event);
        // })
        //ie 678 windows.event
        div.onclick = function (event) {

            console.log(windows.event);
        }
        //兼容写法
        div.onclick = function (e) {
            //console.log(e);
            e = e || windows.event
            console.log(e);
        }
    </script>
</body>

5.常见的事件对象属性和方法
1）e.target是返回触发事件的对象
2）this和e.target的区别，this返回的绑定事件的对象，给ul绑定了事件，点击了li，this返回的是ul，e.target返回的就是点击元素li。
3）IE9以下有兼容性问题，e=e || windows.event , e.target || e.srcElement
4)this有一个非常相似的数学 currentTarget 但ie678不认识。
5)e.type返回事件的类型。

<script>
        //常见的对象属性和方法
        //e.targer返会的是触发事件的对象
        var div = document.querySelector('div')
        div.addEventListener('click', function (e) {
            console.log(e.target);
        })
        var ul = document.querySelector('ul')
        ul.addEventListener('click', function (e) {
            //我们给ul绑定了事件，那莫this就指向ul,点击了li this指向ul
            console.log(this);
            //e.target指向点击的那个对象，谁触发了这个事件就返回哪个元素
            console.log(e.target);
        })
        //ie678兼容性问题
        // div.onclick = function (e) {
        //     e = e || windows.event
        //     var target = e.target || e.srcElement
        //     console.log(target);
        // }
        //2.了解 this有个非常相似的属性currentTarget ie678不认识

       //e.type返回事件的类型、
       //
    </script>

6.事件对象阻止默认行为
1）阻止默认行为（事件）让链接不跳转，或者让提交按钮不提交。
2）dom标准写法：e.preventDefault（）
3) 传统的注册方式，e.preventDefault()低版本浏览器，e.returnValue是属性没有小括号。
4）或者return false 没有兼容性问题，也能阻止默认行为，但 return后面的代码不执行，只限于传统注册方式。

 <script>
        //1.返回事件类型
        var div = document.querySelector('div')
        div.addEventListener('click', fn)
        div.addEventListener('mouseover', fn)
        function fn(e) {
            console.log(e.type);
        }
        //2.阻止默认行为（事件） 让链接不跳转，或者让提交按钮不提交
        var a = document.querySelector('a')
        a.addEventListener('click', function (e) {
            e.preventDefault()//dom标准写法
        })
        //传统的注册方式
        a.onclick = function () {
            //普通浏览器
            e.preventDefault()  //方法
            //低版本浏览器 ie678   
            e.returnValue;//属性
            return false //没有兼容性问题，也能阻止默认行为， 特点：return后面代码不执行，只限于传统注册方式
            alert(11)
        }
    </script>

7.阻止事件冒泡的两种方式
1）e.stopPropagation() stop停止Propagation传播。
2）e.cancleBubble()=true 非标准

<script>
        var son = document.querySelector('.son')
        son.addEventListener('click', function (e) {
            alert('son')
            e.stopPropagation();//stop 停止Propagation传播
            //  e.cancleBubble = true//非标准
        })
        var father = document.querySelector('.father')
        father.addEventListener('click', function () {
            alert('father')
        })
        document.addEventListener('click', function () {
            alert('document')
        })</script>

8.事件冒泡带来的事件委托
1）事件委托原理：不是给每个子节点单独设置事件监听，二十事件监听器设置在其父节点上，然后利用冒泡原理影响设置到每个子节点
2）给ul注册点击事件，然后利用事件对象的target来找到当前点击的li，因为点击li，事件会冒泡到ul上，ul有注册事件，就会触发事件监听器

   <script>
        //事件委托原理：不是给每个子节点单独设置事件监听，二十事件监听器设置在其父节点上，然后利用冒泡原理影响设置到每个子节点
        //给ul注册点击事件，然后利用事件对象的target来找到当前点击的li，因为点击li，事件会冒泡到ul上，ul有注册事件，就会触发事件监听器
        var ul = document.querySelector('ul')
        ul.addEventListener('click', function (e) {
            //alert(123123)
            //e.target得到点击的对象
            e.target.style.backgroundColor = 'pink'
        })
    </script>

9.禁止选中文字和禁用右键
1）contextmenu 禁用鼠标右键菜单
2）禁止选中文字selectstart

<body>
    我是一段不愿意分享的文字
    <script>
        //1.contextmenu 禁用鼠标右键菜单
        document.addEventListener('contextmenu', function (e) {
            e.preventDefault()
        })
        //2.禁止选中文字selectstart
        document.addEventListener('selectstart', function (e) {
            e.preventDefault()
        })
    </script>

10鼠标事件对象
1）client 鼠标在可视区域的xy坐标
2）e.pagex/y 返回鼠标相对于文档页面的xy坐标 ie9+支持
3）e.screenX/Y返回相当于电脑屏幕的x，y坐标

<script>
        //鼠标事件对象mouseEvent
        document.addEventListener('click', function (e) {
            //client 鼠标在可视区域的xy坐标
            console.log(e.clientX);
            console.log(e.clientY);
            //e.pagex/y 返回鼠标相对于文档页面的xy坐标  ie9+支持
            //e.screenX/Y返回相当于电脑屏幕的x，y坐标
        })
    </script>

学习时间：

9.23

YoungManxia

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
web-js总结（7）

学习目标：1.注册事件2.解绑事件（删除事件）3.dom事件流4.事件对象5.常见的事件对象属性和方法6.事件对象阻止默认行为7.阻止事件冒泡的两种方式8.事件冒泡带来的事件委托9.禁止选中文字和禁用右键10鼠标事件对象学习内容：1.注册事件1.事件监听注册事件，里面的类型是字符串，加引号，不带on例如onclick在addEventListenner（‘click’，function（）{}）2.同一元素采用这种方式可以添加多个监听器3.IE9以前的浏览器不支持addEven
复制链接

扫一扫