绑定事件bind/自定义事件

                                         绑定事件bind

<!DOCTYPE html>

<html lang="en">

<head>

<meta charset="UTF-8">

<title>绑定事件bind</title>

<style type="text/css">

</style>

<script type="text/javascript" src="js/jquery-1.12.4.min.js"></script>

<script type="text/javascript">

$(function(){

// //只能绑定click事件,不能绑定其他的了

// $('#btn').click(function() {

// /* Act on the event */

// });

//bind方式可绑定多个事件

$('#btn').bind('click mouseover', function() {

alert('hello!');

//取消绑定事件

$(this).unbind('mouseover');

});

})

</script>

</head>

<body>

<input type="button" value="按钮" id="btn">

</body>

</html>

......................................................................................................................................................................

                                                自定义事件

<!DOCTYPE html>

<html lang="en">

<head>

<meta charset="UTF-8">

<title>自定义事件</title>

<style type="text/css">

</style>

<script type="text/javascript" src="js/jquery-1.12.4.min.js"></script>

<script type="text/javascript">

$(function(){

//自定义事件只能用bind方式绑定,第一个参数是事件的名字,第二个参数是事件发生时执行的函数

$('#btn1').bind('hello', function(){

alert('hello');

})

$('#btn1').bind('click', function(){

alert('click');

})

$('#btn2').click(function() {

// trigger即可以触发自定义事件,也可以触发原始的事件

$('#btn1').trigger('hello');

$('#btn1').trigger('click');

});

//不一定点击按钮触发,也可页面加载时触发,也可在满足某种if条件时触发

// $('#btn1').trigger('hello');

})

</script>

</head>

<body>

<input type="button" value="按钮" id="btn1">

<input type="button" value="按钮2" id="btn2">

</body>

</html>

......................................................................................................................................................................

©著作权归作者所有,转载或内容合作请联系作者
【社区内容提示】社区部分内容疑似由AI辅助生成,浏览时请结合常识与多方信息审慎甄别。
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。

相关阅读更多精彩内容

  • 本篇博客源地址 总结: 鼠标事件 1.click与dbclick事件ele.click()ele.click(ha...
    ZombieBrandg阅读 3,950评论 0 1
  • 总结: 鼠标事件 1.click与dbclick事件$ele.click()$ele.click(handler(...
    阿r阿r阅读 5,543评论 2 10
  • //------------------------- 第一章 认识JQuery ----------------...
    米塔塔阅读 4,071评论 0 9
  • 1.JQuery 基础 改变web开发人员创造搞交互性界面的方式。设计者无需花费时间纠缠JS复杂的高级特性。 1....
    LaBaby_阅读 5,248评论 0 2
  • 1.JQuery 基础 改变web开发人员创造搞交互性界面的方式。设计者无需花费时间纠缠JS复杂的高级特性。 1....
    LaBaby_阅读 4,925评论 0 1

友情链接更多精彩内容