12JavaScript自定义对象、事件

来源：互联网发布：u盘安装linux系统编辑：程序博客网时间：2024/06/09 23:24

自定义对象

自定义对象概述

是一种特殊的数据类型，由属性和方法封装而成
属性是指与对象有关的值：对象名.属性名
方法是指对象可以执行的行为或可以完成的功能：对象名.方法名()

创建对象

直接创建对象

使用构造器创建对象
使用JSON创建对象
JavaScript Object Notation是一种轻量级的数据交换格式

创建的方式

a)直接量（JSON），使用名/值对的方式定义
```
{“name”: “zs”, “age”:23 }
```
{ }代表一个对象，内含多组键值对
key一般是字符串
value可以是任何类型变量

b) 构造器（new的函数/首字母大写）

内置构造器：
特殊：String(), Date(), RegExp(), Function()
通用：Object()

自定义构造器：

声明函数，首字母大写

声明参数，明确指示调用者传入参数

对象要记录这些参数

<script>//采用直接量的方式创建对象function f1() {    var student = {        "name": "Zhangsan",        "age": 23,        "work": function() {            alert("I am a java learner");        }    };    alert(student.name);    alert(student.age);    student.work();}//采用内置构造器创建对象function f2() {    var teacher = new Object();    teacher.name = "Mr. Li";    teacher.age = 18;    teacher.work = function(){        alert("I am teaching java");    };    alert(teacher.name);    alert(teacher.age);    teacher.work();}//采用自定义构造器创建对象——大写function Coder(name, age, work) {    this.name = name;    this.age = age;    this.job = work;}function f3() {    var coder = new Coder(        "List", 28, function() {            alert("I am coding");    });    alert(coder.name);    alert(coder.age);    coder.job();}</script><body>    <input type="button" value="button1" onclick="f1()">    <input type="button" value="button2" onclick="f2()">    <input type="button" value="button3" onclick="f3()"></body>

总结：

无论采用哪种方式创建出来的对象本质只是方式不同

如果对象需要给其他人使用，使用自定义方式。若只是自己使用，建议使用直接量或者内置构造器方法。

事件

事件概述：

事件概述、事件属性、事件定义

event对象

event对象、获取event对象、使用event对象

事件处理机制

事件概述：
用户的操作、动作，即JS调用的时机
事件属性：
通过一个事件属性，可以在某个事件发生时对某个元素进行某种操作
鼠标事件
onclick ondblclick onmouseover onmouseout
键盘事件
onkeydown onkeyup

状态事件:达到某条件自动触发

onload onchange onblur onsubmit

onchange()事件一般用于用户表单中，例如：当文本框内容发生改变时触发的事件，或者下拉列表框内容发生改变时触发的事件等。
onblur:当输入域失去焦点时————未选中

onfocus:当输入域获取焦点时————选中

<script>$(document).ready(function(){  $("input").focus(function(){    $("input").css("background-color","#FF0000");  });  $("input").blur(function(){    $("input").css("background-color","#0000FF");  });});</script><body>Enter your name: <input type="text" /><p>请在上面的输入域中点击，使其获得焦点，然后在输入域外面点击，使其失去焦点。</p></body>

事件定义：

直接绑定
在元素上通过事件属性定义事件，如onclick="f1();"
优点:直观
缺点:耦合度高
后绑定
在页面加载后获取节点，使用js给它追加一个事件
优点:耦合度低
缺点:不直观

event对象

任何事件触发后将会产生一个event对象

event对象记录事件发生时的鼠标位置、键盘按键状态和触发对象等信息
获得event对象
使用event对象获得相关信息，如单击位置、触发对象等
常用属性：
clientX/ clientY/ cancelBubble等

获取event对象：需要考虑浏览器兼容性

a) IE浏览器:JS或者HTML代码中直接使用event

<p onlick=”alert(event.client);”>p text</p><div onclick=”f1();”>div text</div>function f1() {    alert(event.clientX+”: ”+event.clientY);}

b) Firefox浏览器

HTML代码中直接使用eventHTML代码中直接使用event    <p onclick=”alert(event.clientX);”>p text</p>JS代码中直接使用event关键字————不能直接使用    <div onclick=”f1();”>div text</div>    function f1() {        alert(event.clientX+”: ”+event.clientY);    }

ReferenceError: event is not defined

在HTML代码中，在事件句柄定义时，使用event关键字将事件对象作为参数传入

<div onclick=”f1(event);”>div text</div>function f1(e) {    alert(e.clientX+”: ”+e.clientY);}<script>    //直接绑定事件    function f1(e) {            console.log(“direct”);          console.log(e);}    //页面加载后    window.onload = function(){        //给button2绑定单击事件        var btn = document.getElementById(“btn2”);        btn.onclick = function(e) {            console.log(“indirect”);            console.log(e);    };}</script><body>    <input type=”button” value=”button1” onclick=”f1(event);”/>    <input type=”button” value=”button2” id=”btn2”/></body>

case:calculate

功能实现：按钮输入数字及表达式

<style>.panel {        border: 4px solid #ddd; width: 192px;   margin: 100px auto;}.panel p, .panel input {        font-family: “微软雅黑”;    font-size: 20px;    margin: 4px;    float: left;}.panel p {    width: 122px;   height: 26px; border: 1px solid #ddd;   padding: 6px; overflow: hidden;}.panel input {      width:40px; height: 40px; border: 1px solid #ddd;       }</style><script>    window.onload = function() {        //给div绑定单击事件        var div = document.getElementById(“calculate”);        div.onclick = function(e) {            //获取事件源            var obj = e.srcElement || e.target;            if( obj.nodeName == “INPUT” ) {                var p = document.getElementById(“screen”);                if( obj.value == “=” ) {                    //计算                    try {                        p.innerHTML = eval(p.innerHTML);                    } catch(e) {                        p.innerHTML = “Error”;                    }                } else if( obj.value == “C”) {                    //清空                    p.innerHTML = “”;                } else {                    //累加                    p.innerHTML += obj.value;                }            }        };    }</script><body>    <div class=”panel” id=”calculate”>        <div>            <p id=”screen”></p>            <input type=”button” value=”C”>            <div style=”clear:both”></div>  <!-- 消除前两行浮动影响 -->        </div>        <div>            <input type=”button” value=”7”/>            <input type=”button” value=”8”/>            <input type=”button” value=”9”/>            <input type=”button” value=”/”/>            <input type=”button” value=”4”/>            <input type=”button” value=”5”/>            <input type=”button” value=”6”/>            <input type=”button” value=”*”/>            <input type=”button” value=”1”/>                <input type=”button” value=”2”/>            <input type=”button” value=”3”/>            <input type=”button” value=”-”/>            <input type=”button” value=”0”/>            <input type=”button” value=”.”/>            <input type=”button” value=”=”/>            <input type=”button” value=”+”/>            <div style=”clear:both”></div>        </div>    </div></body>

取消事件:

return false;

事件对象：

什么是事件对象：

在某些特定情况下，需要获取事件发生时的鼠标坐标，键盘按键等信息

这些和时间相关的特殊信息被浏览器封装在一个对象里：event

这个由浏览器提供、和事件相关的对象，称为时间对象

如何获得事件对象：

直接绑定事件时
调用函数时，直接传入event对象，函数增加参数获取该对象
后绑定事件时
调用函数时，浏览器会自动传入event，函数增加参数接收该对象

事件冒泡：

什么是事件冒泡：

事件触发的顺序是由内向外的

如何取消事件冒泡：

通过事件对象的API

事件冒泡的作用：

可以简化事件的定义

case:bubble event

<style>    div{    border/width/padding.. }    p { border/padding  }</style><script>    function f1(e) {        alert(“BUTTON”);        //取消冒泡        //e={“stopPropagation”:function() {} }        //e={“cancelBubble”:false }        if(e.stopPropagation) {            e.stopPropagation();        } else {            e.cancelBubble = true;        }    }</script><body>    <div onclick=”alert(‘DIV’)”>        <p onclick=”alert(‘P’)”>            <input type=”button” value=”button1” onclick=”f1(event);”/>        </p>    </div></body>

事件源：

事件发生的具体位置/来源

通过事件对象获取

阅读全文

0 0