jsp 下拉框绑定事件_jQuery事件

1.jQuery基本事件

事件三要素：事件源、事件、事件驱动程序

• 事件源，也就是需要操作的对象，例如：var box = $("#box");
• 事件，例如：onclick、onmouseenter等，例如：box.click(function () { 程序 });
• 事件驱动程序，就是接下来我们将要要学习的关于DOM的操作，例如：$(this).css("color", "red");

1.1 单击事件

| 事件 | 描述 | | :---: | :---: | | click | 鼠标点击某个对象 |

实例：给文档中的 id="box" 元素添加点击事件。

<script>
    $(function () {
    
        $("#box").click(function () {
    
              alert("单击事件");
        })
    })
</script>

在jQuery的事件中，我们也可以主动的响应对应的事件。

$("#box").click();

1.2 双击事件

| 事件 | 描述 | | :---: | :---: | | dblclick | 鼠标双击某个对象 |

实例：给文档中的 id="btn" 元素添加点击事件。

<script>
    $(function () {
    
        $("#box").dblclick(function () {
    
              console.log("双击事件");
        });
    })
</script>

1.3 焦点事件

| 事件 | 描述 | | :---: | :---: | | focus | 元素获得焦点时触发 | | blur | 元素失去焦点时触发 |

实例：给文档中的<input>元素添加点击事件。

<script>
    $(function () {
    
        $("input").focus(function () {
    
              console.log("获得焦点");
        });
        $("input").blur(function () {
    
              console.log("失去焦点");
        });
    })
</script>

1.4 改变事件

| 事件 | 描述 | | :---: | :---: | | change | 域的内容被改变触发，用于input、select和textarea标签。 |

当用于 select 元素时，change 事件会在选择某个选项时发生。当用于 input 或 textarea 时，该事件会在元素失去焦点时发生。

实例：给文档中的<select>