-
非常有用~~~
//多事件绑定一
$("ul").on('click',function(e){
alert('触发的元素是内容是: ' + e.target.textContent)
})
发现点击列表的圆点左侧会出现ul触发，为了防止ul触发，根据on的用法，加入选择器选项，改成如下，ul不再触发，只有li能够触发
//多事件绑定一
$("ul").on('click','li',function(e){
alert('触发的元素是内容是: ' + e.target.textContent)
})
查看全部 -
单击触发，弹出警告当前事件元素的内容查看全部
-
jQuery事件对象的属性和方法
event.type：获取事件的类型
event.pageX 和 event.pageY：获取鼠标当前相对于页面的坐标
--可以确定元素在当前页面的坐标值
--鼠标相对于文档的左边缘的位置（左边）与 （顶边）的距离,简单来说是从页面左上角开始
--即是以页面为参考点,不随滑动条移动而变化
event.preventDefault() 方法：阻止默认行为
event.stopPropagation() 方法：阻止事件冒泡
事件是可以冒泡的，为防止事件冒泡到DOM树上，也就是不触发的任何前辈元素上的事件处理函数
event.which：获取在鼠标单击时，单击的是鼠标的哪个键
event.currentTarget : 在事件冒泡过程中的当前DOM元素
this和event.target的区别：
js中事件是会冒泡的，所以this是可以变化的，但event.target不会变化，它永远是直接接受事件的目标DOM元素；
.this和event.target都是dom对象
如果要使用jquey中的方法可以将他们转换为jquery对象。比如this和$(this)的使用、event.target和$(event.target)的使用；
查看全部 -
卸载事件off()方法
- 通过.on()绑定的事件处理程序
- 通过.o ff() 方法移除该绑定
eg:
绑定2个事件
$("elem").on("mousedown mouseup",fn)删除一个事件
$("elem").off("mousedown")删除两个事件
$("elem").off("mousedown mouseup")快捷方式删除所有事件，这里不需要传递事件名了，节点上绑定的所有事件将全部销毁
$("elem").off()查看全部 -
on()的高级用法
委托机制
----提供了一个选择器
eg:
//给body绑定一个click事件
//没有直接给.aaron元素绑定点击事件
//通过委托机制，点击.aaron元素的时候，事件触发
$('body').on('click', '.aaron', function(e) {
// alert(e.target.textContent)
alert($(this).text())
})
///
第二参数并不是委托给它
例如老头子body开了个公司，如果没有第二参数，那全公司所有人都可以调用财务
如果有第二参数a，
当a是最底层员工时，即没有子元素，那么全公司只有a可以调用财务
当a是非底层员工时，即a有后代或子元素，那么全公司只要是a或a的后代都可以调用财务
冒泡是从内往外冒泡，a在最里面的时候只有a可以触发事件，a如果在中间，那么从最里面一直冒泡冒到a，这些后代都可以触发
this肯定是指dom树中触发事件的dom元素（不可能是集合）
在这里指的就是---.aaron和.aaron的后代的合集中触发事件的这个元素
这里给body绑定事件，on()函数里面的第二个参数是'.aaron'，就是委托给'.aaron'了，虽然绑定在了body上，
因为委托给'.aaron'了，所以点击'.aaron'或它的后代才能触发，
查看全部 -
on()的多事件绑定
方法一：
最常见的给元素绑定一个点击事件，对比一下快捷方式与on方式的不同
$("#elem").click(function(){}) //快捷方式 $("#elem").on('click',function(){}) //on方式方法二：
多个事件绑定同一个函数
$("#elem").on("mouseover mouseout",function(){ });通过空格分离，传递不同的事件名，可以同时绑定多个事件
eg:
$("#test2").on('mousedown mouseup', function(e) {
$(this).text('触发事件：' + e.type)
}) /// e.type--->type意思是事件类型，
//// $(this).text('触发事件：' + e.type) 就是要在text中显示当前触发的事件类型
方法三：
多个事件绑定不同函数
$("#elem").on({ mouseover:function(){}, mouseout:function(){} });方法四：
将数据传递到处理程序
function greet( event ) { alert( "Hello " + event.data.name ); //Hello 慕课网 } $( "button" ).on( "click", { name: "慕课网" }, greet );查看全部 -
jQuery键盘事件之keypress()事件
跟keydown是非常相似
keypress事件与keydown和keyup的主要区别
- 只能捕获单个字符，不能捕获组合键
- 无法响应系统功能键（如delete，backspace）
- 不区分小键盘和主键盘的数字字符
查看全部 -
jQuery键盘事件之keydown()与keyup()事件
eg:
//监听键盘按键
//获取输入的值
$('.target1').keydown(function(e) {
$("em:first").html(e.target.value)
});
//监听键盘按键
//获取输入的值
$('.target2').keyup(function(e) {
$("em:last").text(e.target.value)
});
//在.target2中每次键盘松手的那个按键是e
让最后一个em的text为每一个目标按键的value
在input元素上绑定keydown事件会发现一个问题：
每次获取的内容都是之前输入的，当前输入的获取不到
因为：
keydown事件触发在文字还没敲进文本框，这时如果在keydown事件中输出文本框中的文本，得到的是触发键盘事件前的文本 / 而keyup事件触发时整个键盘事件的操作已经完成，获得的是触发键盘事件后的文本
查看全部 -
jQuery表单事件之submit事件
可以通过submit事件，监听下提交表单的这个动作
具体能触发submit事件的行为：
- <input type="submit">
- <input type="image">
- <button type="submit">
- 当某些表单元素获取焦点时，敲击Enter（回车键）
查看全部 -
jQuery表单事件之select事件
当 textarea 或文本类型的 input 元素中的文本被选择时，会发生 select 事件。
select事件只能用于<input>元素与<textarea>元素
eg:触发元素的select事件 $(_input_).select(function(e){ alert(e.target.value) }) $(_
查看全部 -
jQuery表单事件之change事件
<input>元素，<textarea>和<select>元素的值都是可以发生改变的，开发者可以通过change事件去监听这些改变的动作
input元素
监听value值的变化，当有改变时，失去焦点后触发change事件。对于单选按钮和复选框，当用户用鼠标做出选择时，该事件立即触发。
select元素
对于下拉选择框，当用户用鼠标作出选择时，该事件立即触发
textarea元素
多行文本输入框，当有改变时，失去焦点后触发change事件
change事件很简单，无非就是注意下触发的先后行为
查看全部 -
jQuery表单事件之blur与focus事件
表单处理事件focusin事件与focusout事件，
同样用于处理表单焦点的事件还有blur与focus事件
它们之间的本质区别:
是否支持冒泡处理<div> <input type="text" /> </div>
其中input元素可以触发focus()事件
div是input的父元素，当它包含的元素input触发了focus事件时，它就产生了focusin()事件。
focus()在元素本身产生，focusin()在元素包含的元素中产生
blur与focusout也亦是如此
查看全部 -
jQuery鼠标事件之focusout事件
当一个元素，或者其内部任何一个元素失去焦点的时候，比如input元素，用户在点击失去焦的时候，如果开发者需要捕获这个动作，jQuery提供了一个focusout事件
eg:给input元素增加一个边框 $(_input_first_).focusout(function() { $(this).css('border','2px solid red') })
查看全部 -
jQuery鼠标事件之focusin事件
当一个元素，或者其内部任何一个元素获得焦点的时候，例如：input元素，用户在点击聚焦的时候，如果开发者需要捕获这个动作的时候，jQuery提供了一个focusin事件
eg: function fn(e) {
$(this).val(e.data)
}
function a() {
$("input:last").focusin('慕课网', fn)
}
a();
查看全部 -
jQuery鼠标事件之hover事件
$(selector).hover(handlerIn, handlerOut)
- handlerIn(eventObject)：当鼠标指针进入元素时触发执行的事件函数
handlerOut(eventObject)：当鼠标指针离开元素时触发执行的事件函数
eg: $("p").hover(
function() {
$(this).css("background", 'red');
},
function() {
$(this).css("background", '#bbffaa');
}
);
查看全部 -
jQuery鼠标事件之mouseenter与mouseleave事件
三种参数传递方式与mouseover和mouseout是一模一样的
关键点就是：冒泡的方式处理问题<div class="aaron2"> <p>鼠标离开此区域触发mouseleave事件</p> </div> 这里的问题是div为什么会被触发？ 原因就是事件冒泡的问题，p元素触发了mouseover，他会一直往上找父元素上的mouseover事件，如果父元素有mouseover事件就会被触发
而 mouseenter事件 mouseenter事件只会在绑定它的元素上被调用，而不会在后代节点上被触发（上级）
查看全部 -
jQuery鼠标事件之mouseover与mouseout事件
var n = 0;
//绑定一个mouseover事件
$(".aaron1 p:first").mouseover(function(e) {
$(".aaron1 a").html('进入元素内部,mouseover事件触发次数：' + (++n))
})
查看全部 -
jQuery鼠标事件之mousemove事件
监听用户移动的的操作
eg:
//绑定一个mousemove事件
//触发后修改内容
$(".aaron1").mousemove(function(e) {
$(this).find('p:last').html('移动的X位置：' + e.pageX) //移动时，鼠标相对于左边的位置
})
event.pageX 属性返回鼠标指针的位置，相对于文档的左边缘。
查看全部 -
jQuery鼠标事件之mousedown与mouseup事件
mousedown: 鼠标按下
mouseup:鼠标弹起
方法一：$ele.mousedown()
方法二：$ele.mousedown( handler(eventObject) )
方法三：$ele.mousedown( [eventData ], handler(eventObject) )
用event 对象的which区别按键，敲击鼠标左键which的值是1，敲击鼠标中键which的值是2，敲击鼠标右键which的值是3
eg: $("button:eq(0)").mousedown(function(e) {
alert('e.which: ' + e.which)
})
- 如果用户在一个元素上按下鼠标按键，并且拖动鼠标离开这个元素，然后释放鼠标键，这仍然是算作mouseup事件
- 如果在一个元素按住了鼠标不放，并且拖动鼠标离开这个元素，并释放鼠标键，这仍然是算作mousedown事件
查看全部 -
jQuery鼠标事件之click与dbclick事件]
方法一：$ele.click()
绑定$ele元素，不带任何参数一般是用来指定触发一个事件，用的比较少
eg:
$('p').click(function(){
alert(this. textContent)
})或
$('p').click(function(e) {
alert(e.target.textContent)
})textContent 属性设置或者返回指定节点的文本内容----
this是随时变化的，它指向的总是当前触发的事件，而e.target则是仅仅指向触发该事件的节点----e是元素，名字是可变的$("button:eq(1)").click(function() {
$('p').click() //指定触发绑定的事件
})
方法三：$ele.click( [eventData ], handler(eventObject) )
使用与方法二一致，不过可以接受一个数据参数，这样的处理是为了解决不同作用域下数据传递的问题
//不同函数传递数据
function data(e) {
alert(e.date) //e.date指向的是下面的1111
}
function a() {
$("button:eq(2)").click(1111,data)调用date函数
} //date接受 1111数据参数
a();
查看全部 -
trigger
触发事件函数，比如你点击了按钮B，B上绑着trigger按钮A的函数，那么按钮A的函数被触发
查看全部
举报