jQuery事件对象和js对象创建(使用构造函数的方式)
Posted calm寻路人
tags:
篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了jQuery事件对象和js对象创建(使用构造函数的方式)相关的知识，希望对你有一定的参考价值。
一：使用构造函数创建jQuery对象。
1：jQuery的Event()构造函数用事件名称作为参数来创建事件对象。使用构造函数创建事件对象时，可不使用new关键字。
2：使用trigger()方法来触发事件。
3：on()方法可以为事件附加事件处理函数，off()方法用于解除附加事件函数.
语法格式：$(‘selector‘).on("enventname",function name(){.....函数体 })。【注意】：可以为同一个目标附加多个事件函数。
1 <!DOCTYPE html> 2 <html> 3 4 <head> 5 <meta charset="utf-8"> 6 <title>创建jQuery对象.</title> 7 <script type="text/javascript" src="http://ajax.aspnetcdn.com/ajax/jQuery/jquery-3.2.1.min.js"> 8 </script> 9 <style type="text/css"> 10 11 </style> 12 </head> 13 <script> 14 $(function() { 15 //为body绑定click事件. 16 var n = 0 17 $(‘body‘).on(‘click‘, function() { 18 $(‘body‘).append(‘<div>you click me:‘ + (++n) + ‘</div>‘) 19 }) 20 var e1 = $.Event(‘click‘) //创建事件对象. 21 var e2 = new $.Event(‘click‘) //创建事件对象. 22 /* 23 可以把trigger触发想象成不需要鼠标等特定的实际动作的触发方法。 24 25 */ 26 for (var i = 0; i < 3; i++) { 27 $(‘body‘).trigger(e1) //触发事件. 28 } 29 for (var i = 0; i < 3; i++) { 30 $(‘body‘).trigger(e2) //触发事件. 31 } 32 }) 33 </script> 34 35 <body> 36 使用事件对象. 37 </body> 38 39 </html>
2：附加和解除事件处理函数:
1 <!DOCTYPE html> 2 <html> 3 4 <head> 5 <meta charset="utf-8"> 6 <title>附加和解除事件处理函数</title> 7 <script type="text/javascript" src="http://ajax.aspnetcdn.com/ajax/jQuery/jquery-3.2.1.min.js"> 8 </script> 9 <style type="text/css"> 10 11 </style> 12 </head> 13 <script> 14 /* 15 绑定三个同一个button：他们会依次执行.但是只需要单击一次按钮 16 */ 17 $(function() { 18 $(‘#btn‘).on(‘click‘, function(event) { 19 $(‘div‘).css(‘border‘, ‘dashed 1px red‘) 20 }) 21 $(‘#btn‘).on(‘click‘, function() { 22 $(‘div‘).css(‘color‘, ‘red‘) 23 }) 24 $(‘#btn‘).on(‘click‘, addSub) 25 26 function addSub() { 27 $(‘div‘).append(‘<h1>addSub附加事件函数.</h1>‘) 28 } 29 $(‘#btn1‘).click(function() { 30 $(‘#btn‘).off(‘click‘, addSub) //解除addSub事件处理函数 31 }) 32 }) 33 </script> 34 35 <body> 36 <div>附加多个事件处理函数</div><br> 37 <button id="btn">改变DIV通过on</button> 38 <button id="btn1">解除addSub的附加</button> 39 </body> 40 41 </html>
3:js创建对象，以及对象的属性和方法：
1 <!DOCTYPE html> 2 <html> 3 <head> 4 <title>function</title> 5 <script type="text/javascript"></script> 6 <script> 7 /* 8 1:对象的方法： 9 即通过对象调用的函数,在方法中可以用this关键字来引用当前对象,将函数赋值给对象属性,该属性即可称为方法,通过该属性来引用函数.作为方法使用的属性,可称为方法属性. 10 */ 11 function print()//定义对象的方法 12 { 13 for (p in this) //通过this关键字来引用当前对象 14 { 15 document.write(‘<br>属性p:‘+p) 16 document.write(‘<br>属性‘+p+‘=‘+this[p]) 17 } 18 } 19 function count(c) 20 { 21 document.write(‘<br>对象b‘+c) 22 document.write(‘<br>b.name‘+this.name) 23 } 24 var a = {name:‘c++‘,price:12} 25 //在引用对象方法时out属性是在引用对象方法的时候才创建的 26 a.out = print //用对象的属性来引用对象的方法 27 a.out()//out就为方法属性,out的属性值就是函数体, 28 var b = {name:‘Make‘,ago:20} 29 b.deng = count 30 b.deng(5) 31 //查看对象的deng属性 32 document.write(‘<br>b.deng=‘+b.deng) 33 34 /* 35 对象的构造函数:构造函数要和new关键字一起使用 36 */ 37 function prints() 38 { 39 for(ps in this) 40 { 41 if(‘function‘===typeof this[ps]) 42 continue //跳过方法 43 document.write(‘<br> 属性‘+p+‘=‘+this[ps])//输出属性及其值 44 } 45 } 46 function Book(name,price) 47 { 48 this.name = name //使用this访问当前对象 49 this.price = price 50 this.insert = prints 51 } 52 var s = new Book(‘c++入门‘,40) //执行构造函数 53 document.write(‘<br>‘) 54 document.write(‘对象s:‘) 55 document.write(‘<br>‘) 56 s.insert() //执行对象方法; 57 </script> 58 </head> 59 <body> 60 61 </body> 62 </html>
以上是关于jQuery事件对象和js对象创建(使用构造函数的方式)的主要内容，如果未能解决你的问题，请参考以下文章
作用域链 原型链 继承 事件代理 jQuery bootstrap 模块 优化