您的位置：首页 > Web前端 > JavaScript

Js绑定事件的几种方式

2016-09-18 10:39 309 查看

1.直接在标签中绑定

<!DOCTYPE html>
<html>
<head>
<title>直接在标签里绑定事件</title>
</head>
<body>

<input type="button" value="点我触发事件" onclick="fun1('liming')" />

<script type="text/javascript">
function fun1(name)
{
alert("欢迎："+name)
}
</script>

</body>

2.querySelector方法绑定

<!DOCTYPE html>
<html>
<head>
<title>querySelector方法绑定</title>
</head>
<body>

<input type="button" id="b1" value="点我触发事件"/>

<script type="text/javascript">
function fun1(name)
{
alert("欢迎："+name)
}
document.querySelector('#b1').onclick=function (){fun1('lili')}

</script>

</body>
</html>

3.getElementByID方法绑定

<!DOCTYPE html>
<html>
<head>
<title>getElementByID方法绑定</title>
</head>
<body>

<input type="button" id="b1" value="点我触发事件"/>

<script type="text/javascript">
function fun1(name)
{
alert("欢迎："+name)
}
document.getElementById('b1').onclick=function (){fun1('lili')}
</script>

</body>
</html>

4.JQuery的原生方法绑定

<!DOCTYPE html>
<html>
<head>
<title>JQuery的原生方法绑定</title>
<script src="http://cdn.bootcss.com/jquery/3.1.0/jquery.min.js"></script>
</head>
<body>

<input type="button" id="b1" value="点我触发事件"/>

<script type="text/javascript">
function fun1(name)
{
alert("欢迎："+name)
}
$('#b1').click(function (){fun1('lili')});
</script>

</body>
</html>

内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理

标签： javascript

相关文章推荐

新的分享

章节导航