事件绑定的方式、事件目标对象（target）、事件传播、拖动效果完善、todolist3.0 、利用委托事件对选项卡进行完善、选项卡的拓展、默认行为、函数补充、this关键字

最新推荐文章于 2022-09-14 13:40:50 发布

TOTO come on

最新推荐文章于 2022-09-14 13:40:50 发布

阅读量146

点赞数

文章标签： servlet javascript 开发语言

本文链接：https://blog.csdn.net/qq_56756602/article/details/126631929

版权

一、事件的绑定方式

DOM0级

1.事件属性方式

2.赋值式

DOM2级

3.事件监听(在非IE7 8下使用)

ele.addEventListener(事件类型，function(){

})

兼容性问题

兼容IE 7 8浏览器

区别

1.事件赋值与事件监听同事件属性相比，实现了结构与行为分离、

2.事件赋值与事件监听

事件监听方式后面的事件不会覆盖前面的事件（事件源和时间类型相同）

事件解绑

1.解绑赋值式绑定事件

btn2.οnclick=null

2.解绑事件监听

btn3.removeEventListenter('click',事件处理函数名)

<body>
    <button onclick="alert()">按钮1</button>
    <button>按钮2</button>
    <button>按钮3</button>

 <script>
        var btn2=document.querySelectorAll('button')[1]
        btn2.onclick=function(){
            alert('事件赋值1')

        }
        btn2.onclick=function(){
            alert('事件赋值2')
        }

        var btn3=document.querySelectorAll('button')[2]
        function fun1(){
            alert('事件监听1')

        }
        function fun2(){
            alert('事件监听2')
        }
        // 事件监听事件  后面不会覆盖前面的
        btn3.addEventListener('click',fun1)
        btn3.addEventListener('click',fun2)

        btn3.removeEventListener('click',fun1)//解绑监听事件
       

    </script>

todolist事件监听

1.详细描述需求

点击确定按钮，获取输入框内容，显示到ul节点下

分析:复杂问题简单化

1.绑定点击事件

2.获取输入框内容

3.创建li子节点，输入框作用子节点文本内容，追加给ul

body>
    <div class="container">
        <input type="text" placeholder="请输入内容"><button>确定</button>
        <ul></ul>
    </div>

<script>
        var btn = document.querySelector('button')
        btn.addEventListener('click', function () {

            // 获取输入框内容
            var inputEle = document.querySelector('input')
            var inputValue = inputEle.value
            //    3.创建li子节点，输入框作用子节点文本内容，追加给ul
            var liEle = document.createElement('li')
            liEle.innerHTML = inputValue  //<li>css</li>

            // 4.追加元素
            var ulEle = document.querySelector('ul')
            ulEle.appendChild(liEle)

            // 5.清空内容
            inputEle.value = ''

            // 绑定删除事件
            onDelete()

        }
        )
        //分析：遍历所有li绑定点击事件，删除当亲点击的元素
        function onDelete() {
            var liEles = document.querySelectorAll('ul>li')
            for (var i = 0; i < liEles.length; i++) {
                var liEle = liEles[i]  //li元素

                // 绑定事件
                liEle.addEventListener('click', function () {
                    // 删除当前点击的元素
                    // this关键字：当前点击的元素节点对象
                    this.remove()

                })

            }
        }


    </script>

二、事件目标对象

事件对象

event

事件目标对象

target

当前选中的元素节点

e.target

兼容IE

e.srcElement

var target=e.target||e.srcElement

this关键字：在事件处理函数中this表示事件源

console.loe('this',this)

    <style>
        *{
            padding: 0;
            margin: 0;
        }
        div{
            width: 200px;
            height: 200px;
            background-color: skyblue;
            margin: 100px;
        }
        p{
            width: 100px;
            height: 100px;
            background-color: pink;
        }
     </style>
</head>
<body>
    <div>
        <p></p>

最低0.47元/天解锁文章

TOTO come on

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
事件绑定的方式、事件目标对象（target）、事件传播、拖动效果完善、todolist3.0 、利用委托事件对选项卡进行完善、选项卡的拓展、默认行为、函数补充、this关键字

事件绑定事件（事件赋值与事件监听，todolist2.0）、事件目标对象（target）、事件传播、拖动效果完善、todolist3.0 、利用委托事件对选项卡进行完善、选项卡的拓展、默认行为、函数补充、this关键字等等...
复制链接

扫一扫

事件绑定的方式、事件目标对象（target）、事件传播、拖动效果完善、todolist3.0 、利用委托事件对选项卡进行完善、选项卡的拓展、默认行为、函数补充、this关键字

一、 事件的绑定方式

二、事件目标对象

“相关推荐”对你有帮助么？

一、事件的绑定方式