事件

简介: 事件

1.浏览器事件


1.1   resize()函数


方法描述:为 JavaScript 的 “resize” 事件绑定一个处理函数,或者触发元素上的该事件。

需求描述:当浏览器窗口的尺寸改变时,控制台输出“浏览器尺寸改变了”

$(window).resize(function () {
    console.log('浏览器尺寸改变了');
});



1.2 scroll()


方法描述:为 JavaScript 的 “scroll” 事件绑定一个处理函数,或者触发元素上的该事件。

需求描述:当浏览器窗口的滚动条滚动时,控制台输出“浏览器滚动条改变了”

body {
    height: 2000px;
}
$(window).scroll(function () {
    console.log('浏览器滚动条改变了');
});



2.事件绑定


2.1   on()

方法描述:在选定的元素上绑定一个或多个事件处理函数。

需求描述:为按钮添加单击事件,当按钮单击的时候,向控制台输出“按钮被单击了”

$('button').on('click',function () {
    console.log('按钮被单击了');
});



2.2    off()


方法描述: 移除一个事件处理函数。

需求描述:为按钮添加单击事件,然后再解绑,这时候你在点击按钮看看是不是不会输出信息了

$('button').on('click',function () {
    console.log('按钮被单击了');
});


$('button').off('click');



3.事件委托


3.1   delegate()

方法描述:设置事件委托。

需求描述:为ul下的所有li添加单击事件,要求将该单击事件委托给ul,当单击li时,所对应的li背景变为红色

<ul>
    <li>1111</li>
    <li>2222</li>
    <li>3333</li>
    <li>4444</li>
</ul>
$('ul').delegate('li', 'click', function () {
    this.style.background = 'red';
});



3.2   undelegate()


方法描述:移除事件委托。

需求描述:要求移除上一节中设置的事件委托,然后在分别点击li进行验证是否移除事件委托

<ul>
    <li>1111</li>
    <li>2222</li>
    <li>3333</li>
    <li>4444</li>
</ul>
// 设置事件委托
$('ul').delegate('li', 'click', function () {
    this.style.background = 'red';
});
// 移除事件委托
$('ul').undelegate('click');


4.表单事件


4.1   focus()

方法描述:当失去焦点时触发所绑定的函数。

需求描述:当文本框获取焦点时,设置其背景为红色

<input type="text">
$(':text').focus(function () {
    $(this).css('background', 'red');
});


4.2   blur()


方法描述:当获取焦点时触发所绑定的函数。

需求描述:当文本框获取焦点时,设置其背景为红色,当文本框失去焦点时,设置其背景为绿色

<input type="text">
$(':text').focus(function () {
    $(this).css('background', 'red');
});
$(':text').blur(function () {
    $(this).css('background', 'green');
});



4.3    change()


方法描述:当内容改变时触发所绑定的函数。

需求描述:当文本框内容改变时,就向控制台输出当前文本框的内容

<input type="text">
$(':text').change(function () {
    console.log($(this).val());
});

需求描述:当选择框的内容改变时,就向控制台输出当前选中项的内容

<select>
    <option>河北</option>
    <option>河南</option>
    <option>上海</option>
    <option>北京</option>
    <option>广东</option>
</select>
$('select').change(function () {
    console.log($(this).val());
});

4.4  select()


方法描述:当内容选择时触发所绑定的函数。

需求描述:当文本框的内容被选择时,就向控制台输出当前文本框的内容

<input type="text" value="123456">
$('input').select(function () {
    console.log($(this).val());
});

4.5   submit()


方法描述:当表单提交时触发所绑定的函数。

需求描述:当表单提交的时候,弹出对话框“表单提交了”

<form action="#">
    <input type="submit">
</form>
$('form').submit(function () {
    alert('表单提交了');
});

5.鼠标事件


5.1click()

方法描述:当鼠标单击时调用所绑定的函数。

需求描述:为按钮绑定一个单击函数,然后点击按钮,在控制台输出“按钮被单击了”

$('button').click(function () {
    console.log('按钮被单击了');
});


5.2  dblclick()


方法描述:当鼠标双击时调用所绑定的函数。

需求描述:为按钮绑定一个双击函数,然后双击按钮,在控制台输出“按钮被单击了”

$('button').dblclick(function () {
    console.log('按钮被双击了');
});


5.3   mousedown()


方法描述:当鼠标左键按下的时候调用所绑定的函数。

需求描述:当鼠标左键按下的时候,控制台输出“鼠标左键按下”

$('button').mousedown(function () {
    console.log('鼠标左键按下');
});


5.4  mouseup()

方法描述:当鼠标左键松开的时候调用所绑定的函数。

需求描述:当鼠标左键松开的时候,控制台输出“鼠标左键松开”

5.5   mousemove()


方法描述:当鼠标指针在元素内移动时,mousemove事件就会被触发,任何HTML元素都可以接受此事件。

需求描述:鼠标在div内移动,获取当前鼠标相对div的位置坐标

$('.outer').mousemove(function (event) {
    console.log(event.offsetX, event.offsetY);
});


6.键盘事件


6.1  keydown()


方法描述:当键盘按键按下的时候调用绑定的函数。

需求描述:当键盘按键按下的时候,输出当前的按键


$(':text').keydown(function (event) {
console.log(event.key);
});



6.2  keyup()


方法描述:当键盘按键松开的时候调用绑定的函数。

需求描述:当键盘按键松开的时候,输出当前的按键


$(':text').keyup(function (event) {
console.log(event.key);
});



相关文章
|
3月前
|
JavaScript 前端开发
事件8
事件8
36 2
|
3月前
|
监控 JavaScript 前端开发
事件
事件
52 1
|
6月前
|
API
(22):事件总结
(22):事件总结
|
6月前
(18):事件
(18):事件
|
7月前
GotFocus和PreviewLeftButtonDown事件
GotFocus和PreviewLeftButtonDown事件
|
存储 JSON 前端开发
EventSource 引发的一系列事件 #150
EventSource 引发的一系列事件 #150
244 0
|
安全 C#
C#——事件
C#——事件
101 1
|
API 数据库
9.2领域事件
领域(近似理解为实现某个功能的多个模型)事件可以切断领域模型之间的强依赖关系,事件发布后,由事件的处理者决定如何响应事件,以便于实现事件发布和事件处理的解耦。
|
C#
C# 事件
C# 事件
116 0
C# 事件
|
Web App开发 缓存 JavaScript
55、其他常见事件
beforeunload事件在窗口、文档、各种资源将要卸载前触发。它可以用来防止用户不小心卸载资源。
182 0

热门文章

最新文章