JavaScript的对象属性和方法和点击事件

深藏阁楼爱情的钟 2024-04-06 13:22 25阅读 0赞

## JavaScript的Event对象用来描述JavaScript事件，Event代表事件状态，如事件发生的元素，键盘状态，鼠标位置和鼠标按钮状态。一旦事件发生，便会生成Event对象。主要属性和方法： ##

1.  type：事件的类型，就是HTML标签属性中，没有on前缀之后的字符串，例如Click就代表点击事件；
2.  srcElement：事件源，就是发生事件的元素。比如是事件发生的源头，也就是该事件的srcElement（非IE中用target）；
3.  button：声明了被按下的鼠标键，是一个整数。0代表没有案件，1代表鼠标左键，2代表鼠标右键，4代表鼠标的中间件，如果按下了多个鼠标键，就把这些值加起来；
4.  clientX/cleintY：是指事件发生的时候，鼠标的横、纵坐标，返回的是整数，它们的值是相对于包容窗口的左上角生成的；
5.  offsetX/offsetY：鼠标指针相对于源元素位置，可确定单击Image对象的哪个像素；
6.  altKey、ctrlKey、shiftKey：分别指鼠标事件发生的时候，是否同时按住了Alt、Ctrl或者Shift键，返回一个布尔值；
7.  keyCode：返回keydown和keyup事件发生的时候，按键的代码以及keypress事件的Unicode字符。比如event.keyCode=13代表按下了Enter键；
8.  fromElement、toElement：前者是指mouseover事件移动过的文档元素，后者是指mouseout事件中鼠标移动到的文档元素；
9.  cancelBubble：一个布尔值，把它设置为true时，将停止事件进一步起到包容层次的元素，它用于监测是否接受上层元素的事件控制。true代表不被上层元素的事件控制，false代表允许被上层元素的事件控制；
10. returnValue：一个布尔值属性，设置为false的时候可以阻止浏览器执行默认的事件动作；
11. attachEvent() 和detachEvent()方法：为制定DOM对象事件类型注册多个事件处理函数的方法，它们有两个参数，第一个是事件类型，第二个是事件处理函数。在attachEvent()事件执行的时候，this关键字指向的是window对象，而不是发生事件的那个元素。

## JavaScript元素属性操作方法，包括获取属性，修改元素，删除属性 ##

本篇记录JS元素属性的操作的方法。其中包含获取属性两个方法，修改属性两个方法，删除属性一个方法

#### 获取属性 ####

element.属性

该方法通常获取自带属性，例如src href id title alt 等属性

<body>
        <div id="demo" ></div>
        <script>
            var div = document.querySelector('div');
            // 获取元素的属性值
            // element.属性
            console.log(div.id);
        </script>
    </body>

element.getAttribute(‘属性’)

该方法通常获取自定义属性。

<body>
        <div id="demo" index="1" ></div>
        <script>
            var div = document.querySelector('div');
            // 获取元素的属性值
            // element.getAttribute('属性')  get得到获取 attribute 属性的意思 我们程序员自己添加的属性我们称为自定义属性 index
            console.log(div.getAttribute('index'));
        </script>
    </body>

#### 修改属性 ####

element.属性=‘值’

该方法通常用来修改自带属性，例如src href id title alt 等属性。一般采用element.属性进行修改

以src为例来记录元素属性修改的方法。

#### 具体代码如下所示 ####

<body>
        <button id="Revin1">Revin1</button>
        <button id="Revin2">Revin2</button> <br>
        < img src="images/Revin1.jpg" alt="" title="Revin1">
    
        <script>
            // 修改元素属性  src
            // 1. 获取元素
            var Revin1 = document.getElementById('Revin1');
            var Revin2 = document.getElementById('Revin2');
            var img = document.querySelector('img');
            // 2. 注册事件  处理程序
            Revin2.onclick = function() {
                img.src = 'images/Revin2.jpg';
                img.title = 'Revin2';
            }
            Revin1.onclick = function() {
                img.src = 'images/Revin1.jpg';
                img.title = 'Revin1';
            }
        </script>
    </body>

element.setAttribute(‘属性’, ‘值’)

该方法通常针对自定义属性的修改，例如下面例子中的index就是自定义的属性，可以通过该方法进行属性修改

#### 具体实现如下 ####

<body>
        <button id="Revin1" index="1">Revin1</button>
        <button id="Revin2" index="2">Revin2</button> <br>
    
        <script>
            // 1. 获取元素
            var Revin1 = document.getElementById('Revin1');
            var Revin2 = document.getElementById('Revin2');
    
            // 2. 注册事件  处理程序
            Revin2.onclick = function() {
                Revin1.setAttribute('index', 3);
                console.log(Revin1.getAttribute('index'));
    
            }
            Revin1.onclick = function() {
                Revin2.setAttribute('index', 4);
                console.log(Revin2.getAttribute('index'));
            }
        </script>
    </body>

#### 运行结果如下： ####

![92940e5909294c8db78854b732ab42aa.jpeg][]

#### 删除属性 ####

removeAttribute(属性)

删除元素的属性，自带属性与自定义属性均可删除

<body>
        <div id="demo" index="1" class="nav"></div>
        <script>
            var div = document.querySelector('div');
    		console.log(div.id);
            console.log(div.index);
            console.log(div);
            //  移除属性 removeAttribute(属性)    
            div.removeAttribute('index');
            div.removeAttribute('id');
            console.log(div.id);
            console.log(div.index);
            console.log(div);
        </script>
    </body>

#### 运行结果如下： ####

![c0c4100b7644472cae59f924ec184b2d.jpeg][]

[92940e5909294c8db78854b732ab42aa.jpeg]: https://image.dandelioncloud.cn/pgy_files/images/2024/04/06/37c2edf0a9ed4563b1e8f284b87ce5a4.jpeg
[c0c4100b7644472cae59f924ec184b2d.jpeg]: https://image.dandelioncloud.cn/pgy_files/images/2024/04/06/0222e34390064b3e8036095a94de843f.jpeg