JS和jQuery中的事件总结（一）

时间：2023-12-04 14:34:50

学而时习之，小白现在天天写页面，基础知识还是要恶补的。

进入正题，什么是事件（此处单独对jQuery、JS）？就是JS和Html之间的交互时呢，用户和浏览器操作页面时的动作（其实是为引发的效果的执行操作），此处注明，这是楼主自己的理解哈。

1.页面加载事件

JS提供了一个

window.onload

它的执行时机呢，是页面完全加载完毕后，包括页面上的文件、图片等完全加载到浏览器后才开始执行；

另外，此方法仅能保存对一个函数的引用，会自动的用后面的覆盖前面的。看个例子：

function A(){
    alert('我是A');
}

function B(){
    alert('我是B');
}

window.onload=A;
window.onload=B;

浏览器的弹框仅仅一个“我是B”；

解决办法也是有的，毕竟JS还是挺牛的：

window.onload=function(){
  A();
  B();
}

这样两个弹框就按顺序统统出来了。

等同于jQuery中的

$(window).load()

使用的方法呢：

window.onload=function(){
        //代码
}

$(window).load(function(){
        //代码
});

因为他的执行时机问题，若是网页图片数量多，或者网速拖拖，乖乖隆地咚，代码预计会有奇特的现象（这个要看写的什么了）。为此，jQuery有种更好的方法：

$(document).ready()

他呢，执行时机就是在 DOM载入就绪时进行执行，注意啦，是就绪时，此时图片可能还没完全下载到浏览器呢。

更方便的是，jQuery还提供了它的简写方式：

$().ready(function(){});

和

$(function(){});

并且它最大的特点在于，使用它时，行为函数不会出现JS的覆盖问题，它是在现有行为的基础上，进行行为函数追加的：

function A(){
    alert('我是A');
}

function B(){
    alert('我是B');
}

$(function(){
    A();
});

$(function() {
    B();
});

这可是两个框都按照顺序弹出的，和JS的第二种写在一起的方法是一样的效果。

2.绑定事件

在文档加载完成后，打算为某些元素绑定事件，完成某些特定的操作，有个很好的办法 bind().

bind(type,[data],fn) 为每个匹配元素的特定事件绑定事件处理函数。

参数

type,[data],function(eventObject)  这个是v1.0

type: 含有一个或多个事件类型的字符串，由空格分隔多个事件。比如"click"或"submit"，还可以是自定义事件名。

data:作为event.data属性值传递给事件对象的额外数据对象

fn:绑定到每个匹配元素的事件上面的处理函数

type,[data],false 这个是V1.4.3

type:含有一个或多个事件类型的字符串，由空格分隔多个事件。比如"click"或"submit"，还可以是自定义事件名。

data:作为event.data属性值传递给事件对象的额外数据对象

false: 将第三个参数设置为false会使默认的动作失效。

events  这个是V1.4

一个或多个事件类型的字符串和函数的数据映射来执行他们。

示例

当每个段落被点击的时候，弹出其文本。

$("p").bind("click", function(){
  alert( $(this).text() );
});

同时绑定多个事件类型:

$('#foo').bind('mouseenter mouseleave', function() {
  $(this).toggleClass('entered');
});

对于其中的toggleClass，楼主要多说一句：toggle()具有切换状态的功能。

同时绑定多个事件类型/处理程序:

$("button").bind({
  click:function(){$("p").slideToggle();},
  mouseover:function(){$("body").css("background-color","red");},
  mouseout:function(){$("body").css("background-color","#FFFFFF");}
});

你可以在事件处理之前传递一些附加的数据:

function handler(event) {
  alert(event.data.foo);
}
$("p").bind("click", {foo: "bar"}, handler);

通过返回false来取消默认的行为并阻止事件起泡:

$("form").bind("submit", function() { returnfalse; });

其实，这种方式呢，等同于在对事件同事调用了 stopPrapagation()和 preventDefault();

通过使用 preventDefault() 方法只取消默认的行为。

$("form").bind("submit", function(event){
  event.preventDefault();
});

楼主要提醒一句：事件处理函数执行完毕后，事件对象就被销毁了。

通过使用 stopPropagation() 方法只阻止当前事件起泡。

$("form").bind("submit", function(event){
  event.stopPropagation();
});

未完继续。。。

相关文章