JS事件绑定的方法

最新推荐文章于 2025-05-20 11:34:40 发布

somnus_ly

最新推荐文章于 2025-05-20 11:34:40 发布

阅读量487

点赞数

CC 4.0 BY-SA版权

分类专栏： js小结文章标签：事件绑定

本文链接：https://blog.youkuaiyun.com/somous_ly/article/details/38662943

js小结专栏收录该内容

17 篇文章

订阅专栏

本文介绍了JavaScript中四种不同的事件绑定方法，并提供了示例代码。这些方法包括直接在DOM中使用onXXX属性绑定、通过DOM对象的onXXX属性设置绑定、利用attachEvent绑定以及使用<script for>和event属性绑定。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

Javascript的事件绑定主要有四种方法（以下在IE中运行正常，但不保证其他浏览器）：
[注：onXXX为某一事件，fun为某一function，domId为某一DOM对象id，event类型见后边附录。]
1、在DOM中，直接用onXXX="fun();"进行绑定
2、在 Java script代码中用 DOM对象.onXXX=fun 进行绑定
3、用 DOM对象.attachEvent("onXXX",fun) 进行绑定
4、用<script for="domId" event="onXXX">fun();</script> 进行绑定
[javascript]
< html >
<head>
<title>event test</title>
</head>
<body onload="init()">

<button id="btn1" onclick="display()" >绑定方式一</button>

<button id="btn2">绑定方式二</button>

<button id="btn3">绑定方式三</button>

<button id="btn4">绑定方式四</button>
</body>
</html>
<script type="text/javascript">
function init() {
document.getElementById("btn2").onclick = display;//为button2绑定事件
document.getElementById("btn4").attachEvent("onclick", display);//为button4绑定事件
}
function display(event) {
var targ;//触发事件的对象引用
if (!event) {
var event = window.event;//获得当前事件(IE)
}
if (event.target) {//IE没有target
targ = evente.target;
} else if (event.srcElement) {//适用于IE
targ = event.srcElement;
}
//对触发事件的对象进行操作
alert(targ.tagName+"-"+targ.id+"-"+event.x+"-"+event.offsetX);
targ.disabled="disabled" ;
}
<script>
<script for="btn3" event="onclick">
display();//为button3绑定事件
<script>
[javascript] view plaincopy
<html>
<head>
<title>event test</title>
</head>
<body onload="init()">

<button id="btn1" onclick="display()" >绑定方式一</button>


<button id="btn2">绑定方式二</button>


<button id="btn3">绑定方式三</button>


<button id="btn4">绑定方式四</button>
</body>
</html>
<script type="text/javascript">
    function init() {
        document.getElementById("btn2").onclick = display;//为button2绑定事件
        document.getElementById("btn4").attachEvent("onclick", display);//为button4绑定事件
    }
    function display(event) {
        var targ;//触发事件的对象引用
        if (!event) {
            var event = window.event;//获得当前事件(IE)
        }
        if (event.target) {//IE没有target
            targ = evente.target;
        } else if (event.srcElement) {//适用于IE
            targ = event.srcElement;
        }
        //对触发事件的对象进行操作
        alert(targ.tagName+"-"+targ.id+"-"+event.x+"-"+event.offsetX);
        targ.disabled="disabled" ;
    }
<script>
<script for="btn3" event="onclick">
    display();//为button3绑定事件
<script>