JS事件概念与绑定

事件概念
　　和数据库中的触发器一样,当操作了数据的时候会引发对应的触发器程序执行
　　JS 中的事件就是对用户特定的行为作出相应的相应的过程,
　　每个事件都应该有自己的载体
　　其实上就是浏览器监听到用户的某些行为的时候会执行对应绑定程序

事件的绑定
　　在 html 元素上将触发事件的行为和事件的相应的程序关联起来的过程就是事件的绑定

Demo: 直接在 html 代码中绑定事件

<a href="javascript:alert('我是超链接')">超链接</a>

Demo: 绑定函数(绑定单机事件)
　　这种方式不太好, 因为 html 只负责描述内容
　　如果事件很多, 就得在 html 出现大量的 onxxx 的代码,
　　这种代码不方便维护, 也不美观,
html:

<body>
    <button type="button" onclick="login('smith','1234')">登录</button>
</body>

js:

 1 //登录的函数
 2 function login(username,password){
 3     var name = "smith";
 4     var pwd = "1234";
 5     if (username==name&&password==pwd) {
 6         alert("登录成功!");
 7     }else{
 8         alert("用户名或密码不正确!");
 9     }
10 }

Demo: 在 js 中实现事件绑定
　　这种写法必须在把 js 文件加载在 body 之后
html:

<body>
    <button id="btn" type="button">登录</button>
</body>

js:

 1 //获取登录对象并且绑定事件
 2 document.getElementById("btn").onclick=login;
 3 //登录的函数
 4 function login(username,password){
 5     var name = "smith";
 6     var pwd = "1234";
 7     if (username==name&&password==pwd) {
 8         alert("登录成功!");
 9     }else{
10         alert("用户名或密码不正确!");
11     }
12 }

Demo: 解决只能把 js 文件加载在 body 之后
第一种写法:
　　window.onload 事件的载体默认是 bydy元素

 1 //使用加载时间(html一旦加载完毕就马上执行"="之后的匿名函数)
 2 window.onload=function(){
 3     //在匿名函数中绑定事件: 获取按钮对象并且绑定事件
 4     document.getElementById("btn").onclick=login;
 5 }
 6 //登录的函数
 7 function login(username,password){
 8     var name = "smith";
 9     var pwd = "1234";
10     if (username==name&&password==pwd) {
11         alert("登录成功!");
12     }else{
13         alert("用户名或密码不正确!");
14     }
15 }

第二种写法:
　　需要再 body 标签中绑定一个onload="load()" 事件
html:

<body onload="load()">
    <button id="btn" type="button">登录</button>
</body>

js:

 1 function load(){
 2     //获取按钮对象并且绑定事件
 3     document.getElementById("btn").onclick=login;
 4 }
 5 //登录的函数
 6 function login(username,password){
 7     var name = "smith";
 8     var pwd = "1234";
 9     if (username==name&&password==pwd) {
10         alert("登录成功!");
11     }else{
12         alert("用户名或密码不正确!");
13     }
14 }

Demo: 绑定 change 事件
html:

<body onload="load()">
    <select>
        <option>选择城市</option>
        <option value="bj">北京</option>
        <option value="sh">上海</option>
        <option value="gz">广州</option>
        <option value="sz">深圳</option>
    </select>
</body>

js:

 1 function load(){
 2     //获取下拉列表对象,绑定change事件
 3     document.getElementsByTagName("select")[0].onchange=changeCity;
 4 }
 5 //定义出改变城市的函数
 6 function changeCity(){
 7     //this表示触发了函数对象,此处就是下拉列表
 8     var city = this.value;
 9     alert(city);
10 }