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

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. php网络编程实例

    php网络编程实例 一.总结 一句话总结: socket_create():创建socket socket_bind():绑定IP和端口 socket_listen():监听客户端信息 <?ph ...

  2. Win7下使用DbgPrint

    在Win7下默认DbgPrint输出信息后,使用DbgView看不到内容. 新建一个reg文件,双击导出就行了. Windows Registry Editor Version 5.00 [HKEY_ ...

  3. ()centos7 安装python36

    centos7 默认安装 python2.7 1.先安装python36和对应pip yum install python-pip #安装python2的pip yum install python3 ...

  4. 使用并行ssh提高工作效率

    我们经常需要ssh到多个主机上执行相同的命令,为了提高效率,我们通常会自己写个脚本,循环遍历执行我们的命令,比如: for host in `cat hosts.txt`;do ssh usernam ...

  5. Dubbo入门到精通学习笔记(十五):Redis集群的安装(Redis3+CentOS)、Redis集群的高可用测试(含Jedis客户端的使用)、Redis集群的扩展测试

    文章目录 Redis集群的安装(Redis3+CentOS) 参考文档 Redis 集群介绍.特性.规范等(可看提供的参考文档+视频解说) Redis 集群的安装(Redis3.0.3 + CentO ...

  6. 牛客 判断t1树中是否含有与t2树拓扑结构完全相同的子树

    题目链接:https://www.nowcoder.com/practice/5a41ce17e8194e1688aa83a73137f7ee?tpId=101&tqId=33239& ...

  7. CSS Sprite初探之原理、使用

    CSS Sprite简介: 利用CSS Sprites能很好地减少了网页的http请求次数,从而大大的提高了页面的性能,节省时间和带宽.CSS Sprites在国内很多人叫css精灵, 是一种网页图片 ...

  8. Haproxy负载均衡/动静分离(haproxy各选项详细解释)

    在前端领域做负载均衡,动静分离的程序有很多,比较常用的是nginx和Haproxy,今天就说一下 Haproxy在这两方面的表现,文章参考很多网文写成,再加上自己的实验成果,文中所有解释都经过实际环境 ...

  9. Struts2入门示例(Myeclipse)

    1.新建Web项目在lib导入struts-2.3.37核心基础jar包 2.在WebRoot新建2个JSP demo1.jsp <%@ page language="java&quo ...

  10. gary's mod

    第一题: class Parent(object): x = 1 class Child1(Parent): pass class Child2(Parent): pass print(Parent. ...