JavaScript中事件操作和设置事件

最新推荐文章于 2024-08-11 09:55:43 发布

dancheng_work

最新推荐文章于 2024-08-11 09:55:43 发布

阅读量581

点赞数

分类专栏： # JavaScript

本文链接：https://blog.csdn.net/dancheng1/article/details/77018357

版权

JavaScript 专栏收录该内容

36 篇文章 0 订阅

订阅专栏

所有事件：

onclick 点击事件

onmouseover 鼠标移入事件

onmouseout 鼠标移出事件

onkeyup 键盘按下事件

onkeydown 键盘抬起事件

onblur 失去焦点事件

onfocus 获得焦点事件

onsubmit 提交表单时的事件

设置事件

1、dom1级方式设置

①<input type=”text” name=”username” οnclick=”函数名称()” />

function 函数名称(){this[window]}

②<input type=”text” name=”username” οnclick=”过程代码var a=10;var b=20;alert(123);this[itnode]” />

③itnode.onclick = function(){this[itnode]}

④itnode.onclick = 有名函数名称;

function 函数名称(){this[itnode]}

取消dom1级事件：

itnode.onclick = null;

以上是dom1级事件设置的4种具体表现形式，除了第①种（其代表window），其他三种方式的函数内部this都代表当前节点本身。

2、dom2级方式设置

主流浏览器方式(包括IE9以上版本浏览器)：

itnode.addEventListener(事件类型，事件处理[，事件流]); //设置

itnode.removeEventListener(事件类型，事件处理[，事件流]); //取消

IE浏览器方式(IE6/7/8)：

itnode.attachEvent(事件类型，事件处理); //设置

itnode.detachEvent(事件类型，事件处理); //取消

事件类型：就是我们可以设置的具体事件，例如onclick/onmouseover等

主流浏览器方式没有”on标志”，例如addEventListener(‘click’，...);

IE浏览器方式有”on”标志

事件处理：事件驱动，可以是一个有名/匿名函数

例如addEventListener(‘click’,function(){}/有名函数);

事件流：true捕捉型、[false冒泡型]

事件取消(removeEventListener/detachEvent)操作具体要求：

① 事件处理必须是有名函数，不可以是匿名函数。

② 事件取消的参数与绑定的参数完全一致(数量/内容)

dom2级事件设置的特点：

① 可以为同一个对象设置多个同类型事件。

② 事件取消也非常灵活。

③ 对事件流也有很好的处理。

添加事件

<body>
    <h2>dom2级事件设置操作css样式</h2>
    <div style="width: 300px; height: 200px; background: blue;">事件操作</div>
</body>
</html>
<script type="text/javascript">
    //dom2级事件设置简单使用
    var dv = document.getElementsByTagName('div')[0];
    //dv.addEventListener('click', 处理 有名/匿名函数);
    dv.addEventListener('click', function () {
        //this 代表div的元素节点对象
        dv.style.backgroundColor = "pink";
        this.style.width = "400px";
    });
    
    function f1() {
        console.log(111);
    }
    function f2() {
        console.log(222);
    }
    function f3() {
        console.log(333);
    }
    //为同一个div对象设置多个mouseover事件
    dv.addEventListener('mouseover', f1);
    dv.addEventListener('mouseover', f2);
    dv.addEventListener('mouseover', f3);
</script>

效果图：

取消事件

<body>
    <h2>dom2级事件取消</h2>
    <div style="width: 300px; height: 200px; background: blue;">事件取消</div>
    <input type="button" value="取消" οnclick="cancel()">
</body>
</html>
<script type="text/javascript">
    //事件取消要求：1、有名函数设置事件
    //            2、设置和取消的参数完全一致
    //dom2级事件设置简单使用
    var dv = document.getElementsByTagName('div')[0];
    function cancel() {
        dv.removeEventListener('mouseover', f2);
    }
    //dv.addEventListener('click', 处理 有名/匿名函数);
    dv.addEventListener('click', function () {
        //this 代表div的元素节点对象
        dv.style.backgroundColor = "pink";
        this.style.width = "400px";
    });
    
    function f1() {console.log(111);}
    function f2() {console.log(222);}
    function f3() {console.log(333);}
    //为同一个div对象设置多个mouseover事件
    dv.addEventListener('mouseover', f1);
    dv.addEventListener('mouseover', f2);
    dv.addEventListener('mouseover', f3);
</script>

效果图：