今日主打? jQuery事件
事件类型
1.鼠标事件
? ? ? ?click([[data],fn])? ? ? ? ? 单击时触发
? ? ? dbclick([[data],fn])? ? ? ?双击时触发
? ? ? mousedown()? ? ? ? ? ? ?鼠标按下时触发
? ? ? mouseup()? ? ? ? ? ? ? ? ?按下的鼠标松开时触发
? ? ? mouseenter()? ? ? ? ? ? ?鼠标进入时触发
? ? ? mouseleave()? ? ? ? ? ? ?鼠标移出时触发
常用的是上面的
? ? ? hover([over,]out)? ? ? ? ?鼠标在进入和退出时触发两个函数,相当于mouseenter加上mouseleave
? ? ? mouseover? ? ? ? ? ? ? ? ? 鼠标在进入指定元素及其子元素时触发
? ? ? mouseout? ? ? ? ? ? ? ? ? ? 鼠标在移出指定元素及其子元素时触发
? ? ? mousemove([[data],fn]) 鼠标在DOM内部移动时触发
? ? ? scroll([[data],fn])? ? ? ? ?当滚动指定的元素时,会发生scroll事件(scroll触发时不肯定用滚轮去触发)
? 2.键盘事件
? ? ? keydown([[data],fn])? ?当键盘或者按钮被按下时发生keydown事件
? ? ? keyup([[data],fn])? ? ? ? 当键盘或者按钮被松开时发生keyup事件.它发生在当前取得焦点的元素上
? ? ? keypress([[data],fn])? ?当键盘或者按钮被按下时发生keypress事件
PS:keydown 与 keypress 的区别:
? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? keypress必需是输入内容时才会触发。
? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? keydown可以记录所有的按键
val()方法返回或者者设置被选元素的值,获取输入框中的内容可以使用val()
例子:
<body>
<input type=”text” value=””>
<p></p>
<script src=”https://cdn.bootcss.com/jquery/3.3.1/jquery.js”></script>
?<script>
$(document).ready(function(){
/*
? ? ? $(‘input’).keydown(function(){
? ? ? ? ? ? $(‘p’).text($(this).val());
? ? ? });
? ? ? */
? ? ? $(‘input’).keyup(function(){
????????????$(‘p’).text($(this).val());
? ? ? });
});
</script>
</body>
? 3.其余事件
? ? ? ready(fn)? ? ? ? ? ? ? ? ? ?当DOM载入就绪可以查询及操纵时绑定一个要执行的函数
? ? ? focus([[data],fn])? ? ? ? 当元素取得焦点时触发focus事件
? ? ? blur([[data],fn])? ? ? ? ? ?当元素失去焦点时触发blur事件
? ? ? resize([[data],fn])? ? ? ? 当调整浏览器窗口的大小时,发生resize事件,浏览器窗口其对象是window
? ? ? change([[data],fn])? ? ? ?当元素的值发生改变时,会发生change事件
? ? ? select([[data],fn])? ? ? ? ? 当textarea或者文本类型的input元素中的文本被选择时,会发生select事件(需要我们去选中的才能用select事件)
? ? ? submit([[data],fn])? ? ? ? ?当提交表单时,会发生submit事件
? 4.事件参数———–?event
? ? ? 有些事件,如mousemove和keypress,我们需要获取鼠标位置和按键的值,否则监听这些事件就没什么意义了。
? ? ? 所有事件都会传入event对象作为参数,可以从event对象上获取到更多的信息。
? 5.事件绑定与取消
? ? on(events,[selector],[data],fn)? ? ?在选择元素上绑定一个或者多个事件的事件解决函数。
? ? off(events,[selector],,fn)? ? ? ? ? ? ? 在选择元素上移除一个或者多个事件的事件解决函数。
? ? one(type,[data],fn)? ? ? 为每一个匹配元素的特定事件(比方click)绑定一个一次性的事件解决函数。
? ? ? ? ? ? ? ?这两天的干货,小伙伴们觉得枯燥么?若需要举例,请下方留言哦
? ? ? ? ? ? ? 前几篇内容,每一篇由于太详细,讲不了几个点,所以这两天就多备了些。
?? good? ?night? ?
? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? 我虽是个喵星人,但从没养过