同样的功能,不同的书写格式。

1.个人觉得比较繁琐的写法,但是比较常见,特别是在大项目的时候常用的就是这种方法:

<div id="mouse" onmouseover="mOver()" onmouseout="mOut()" style="background-color:#D94A38;width:120px;height:20px;padding:40px;">Mouse Over Me</div>
<script>
function mOver(){
document.getElementById("mouse").innerHTML="Thank You"
}
function mOut(){
document.getElementById("mouse").innerHTML="Mouse Over Me"
}
</script>

2.这个中法比较简单,而且可以少些不少代码:

<div onmouseover="mOver(this)" onmouseout="mOut(this)" style="background-color:#D94A38;width:120px;height:20px;padding:40px;">Mouse Over Me</div>
<script>
function mOver(obj){
obj.innerHTML="Thank You"
}
function mOut(obj){
obj.innerHTML="Mouse Over Me"
}
</script>

利用DOM节点找对象和直接在标签属性中调函数传值this的书写区别的更多相关文章

  1. DOM节点中获取文本易混淆的属性

    DOM 节点中对于获取文本易混淆的属性,innerText, innerHTML, outerHTML, textContent, nodeValue. 一个实例: <!DOCTYPE html ...

  2. DOM节点的增删改查以及class属性的操作

    <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...

  3. React 事件对象、键盘事件、表单事件、ref获取dom节点、react实现类似Vue双向数据绑定

    1.案例实现代码 import React, { Component } from 'react'; /** * 事件对象.键盘事件.表单事件.ref获取dom节点.react实现类似Vue双向数据绑 ...

  4. DOM中Event 对象如何使用

    DOM中Event 对象如何使用 一.总结 一句话总结: 1.将event作为参数传递进来,然后就可以调用event对象的各种属性和方法了. <body onmousedown="wh ...

  5. JS-DOM ~ 03. 子节点的操作、style.样式和属性、dom元素的创建方法及操作、14个例题、主要是利用js直接控制html属性

    带有Element和不带的区别 a)  带Element的获取的是元素节点 b)  不带可能获取文本节点和属性节点 获取所以子节点 a)   . childNodes b)   . children ...

  6. javascript之DOM编程通过html元素的标签属性找节点

    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/ ...

  7. JavaScript 基础(三) - Date对象,RegExp对象,Math对象,Window 对象,History 对象,Location 对象,DOM 节点

    Date对象 创建Date对象 //方法1:不指定参数 var date_obj = new Date(); alert(date_obj.toLocaleString()) //方法2:参数为日期字 ...

  8. React对比Vue(03 事件的对比,传递参数对比,事件对象,ref获取DOM节点,表单事件,键盘事件,约束非约束组件等)

    import React from 'react'; class Baby extends React.Component { constructor (props) { super(props) t ...

  9. 六、React 键盘事件 表单事件 事件对象以及React中的ref获取dom节点 、React实现类似Vue的双向数据绑定

    接:https://www.cnblogs.com/chenxi188/p/11782349.html 事件对象 .键盘事件. 表单事件 .ref获取dom节点.React实现类似vue双向数据绑定 ...

随机推荐

  1. Vue源码------------- 数据响应系统的基本思路

    在 Vue 中,我们可以使用 $watch 观测一个字段,当字段的值发生变化的时候执行指定的观察者,如下: var vm = new Vue({ data: { num:1 } }) vm.$watc ...

  2. php的socket编程(socket关键几个函数)

    php的socket编程(socket关键几个函数) 一.总结 一句话总结: socket_create.socket_connect.socket_bind.socket_listen.socket ...

  3. php开发面试题---php高级程序员需要掌握的一些知识

    php开发面试题---php高级程序员需要掌握的一些知识 一.总结 一句话总结: 还是需要多多接触架构师的知识,比如这里说的微服务,还有需要php服务端的知识来解决web端的不足,比如Swoole 1 ...

  4. GDI及Windows的消息机制

    什么是GDI? GDI, Graphics Device Interface GDI在以下位置已经被微软列为Legacy Graphics,不建议使用来开发应用程序(http://msdn.micro ...

  5. 剑指offer第二版面试题11:旋转数组的最小数字(JAVA版)

    题目:把一个数组最开始的若干个元素搬到数组的末尾,我们称之为数组的旋转.输入一个递增排序的数组的一个旋转,输出旋转数组的最小元素.例如数组{3,4,5,1,2}为{1,2,3,4,5}的一个旋转,该数 ...

  6. SQL中Truncate语法

    转自:http://www.studyofnet.com/news/555.html 本文导读:删除表中的数据的方法有delete,truncate, 其中TRUNCATE TABLE用于删除表中的所 ...

  7. HDU 6693 Valentine's Day (概率)

    2019 杭电多校 10 1003 题目链接:HDU 6693 比赛链接:2019 Multi-University Training Contest 10 Problem Description O ...

  8. FVWM_SMALLEST_CONFIG

    ... # ----------------------------------------------------------------- # HANDBOOK: # http://yaoqian ...

  9. keepalive基础知识

    一.LVS负载均衡集群的缺点 二.Keepalived介绍 三.Keepalived的功能 四.Keepalived工作原理 五.Keepalived组件框架 六.Keepalived的安装 6.1 ...

  10. Maven Optional & Exclusions使用区别

    Optional和Exclusions都是用来排除jar包依赖使用的,两者在使用上却是相反. Optional定义后,该依赖只能在本项目中传递,不会传递到引用该项目的父项目中,父项目需要主动引用该依赖 ...