【代码片-2】 从零开始学习jQuery (五) 事件与事件对象

浏览: 212 发布日期: 2016-11-29 分类: jquery
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
    <title>toggle example</title>
    <link rel="stylesheet" type="text/css" href="css/hover.css" >

    <script type="text/javascript" src="scripts/jquery-1.3.2-vsdoc2.js" ></script>

    <script type="text/javascript"><!--
        $(function()
        {
            $("li").toggle(
              function()
              {
                  $(this).css({ "list-style-type": "disc", "color": "blue" });
              },
              function()
              {
                  $(this).css({ "list-style-type": "square", "color": "red" });
              },
              function()
              {
                  $(this).css({ "list-style-type": "none", "color": "" });
              }
            );
        })
    
// --></script>

</head>
<body>
    <ul>
        <li style="cursor:pointer" >click me</li>
    </ul>
</body>
</html> 


结果是每点击一次"click me"变换一次列表符号和文字颜色.

八.使用jQuery事件对象

使用事件自然少不了事件对象.  因为不同浏览器之间事件对象的获取, 以及事件对象的属性都有差异, 导致我们很难跨浏览器使用事件对象.

jQuery中统一了事件对象,  当绑定事件处理函数时,  会将jQuery格式化后的事件对象作为唯一参数传入:
 


关于event对象的详细说明, 可以参考jQuery官方文档: http://docs.jquery.com/Events/jQuery.Event

jQuery事件对象将不同浏览器的差异进行了合并, 比如可以在所有浏览器中通过 event.target 属性来获取事件的触发者(在IE中使用原生的事件对象, 需要访问event.srcElement).

下面是jQuery事件对象可以在扩浏览器支持的属性:

属性名称 描述 举例
type
事件类型.如果使用一个事件处理函数来处理多个事件, 可以使用此属性获得事件类型,比如click.
$("a").click(function(event) {
  alert(event.type);
});
发表评论

6个评论

我要留言×

技术领域:

我要留言×

留言成功,我们将在审核后加至投票列表中!

收藏提示 ×

本条知识内容已成功收藏到对应的知识图谱中了!管理我的知识图谱

你已经自动关注本知识库了哦!

提示 x

jQuery知识库已成功保存至 我的图谱 现在你可以用它来管理自己的知识内容了

删除图谱提示 &times

你保存在该图谱下的知识内容也会被删除,建议你先将内容移到其他图谱中。你确定要删除知识图谱及其内容吗?

删除节点提示 &times

无法删除该知识节点,因该节点下仍保存有相关知识内容!

删除节点提示 &times

你确定要删除该知识节点吗?

返回顶部