html中行内调用function的时候,是通过window调用的function，所以打印this等于打印window，所以在使用行内注册事件时务必传入参数this

<!DOCTYPE html>

<html>

<head lang="en">

    <meta charset="UTF-8">

    <title></title>

    <style>

        .wrong {

            border: 2px solid red;

        }

        .right {

            border: 2px solid #91B81D;

        }

    </style>

</head>

<body>

    账号：<input type="text" name="name" value="" onblur="fn(this)" /><br /><br />

    密码：<input type="text" name="name" value="" onblur="fn(this)"/>

    <script>

        function fn(ele) {

            if (ele.value.length < 6 || ele.value.length > 12) {

                ele.className = "wrong";

            } else {

                ele.className = "right";

            }

        }

    </script>

</body>

</html>

JS——行内式注册事件的更多相关文章

  1. js行内式遇到的一些问题 DOM对象和jq对象转换的问题

    这两天给后台页面做页面,我的工作比较简单,只需要写结构和样式就行了,写好之后,后端大哥用ajax重写页面加载数据,顺便给标签添加选中事件,做选中后变色的处理,但是却遇到一个问题,一直选不到触发事件这个 ...

  2. JavaScript--返回顶部方法:锚链接、行内式js写法、外链式、内嵌式

    返回网页顶部方法 一.锚链接 simpleDemo: <!DOCTYPE html> <html lang="en"> <head> <m ...

  3. Angular 行内式依赖注入

    var app = angular.module('myApp', ['ng']); //创建一个自定义服务app.factory('$Debug', function () { return { d ...

  4. 0008 CSS初识（行内式、内部样式表、外部样式表）

    typora-copy-images-to: media 第01阶段.前端基础.CSS初识 CSS层叠样式表 学习目标 理解 css的目的作用 css的三种引入方式 应用 css三种引用方式的书写 通 ...

  5. 移动端使用rem.js,解决rem.js 行内元素占位问题

    父级元素: letter-spacing: -0.5em;font-size: 0; 子级元素: letter-spacing: normal; display: inline-block; vert ...

  6. !important覆写css行内样式

    <div class="block"> <span style="font-weight: bold; color: red;">Hel ...

  7. HTML行内元素与块级元素有哪些及区别详解

    转自 https://www.jb51.net/web/724286.html   这篇文章主要介绍了HTML行内元素与块级元素有哪些及区别详解,文中通过示例代码介绍的非常详细,对大家的学习或者工作具 ...

  8. js闭包理解案例-解决for循环为元素注册事件的问题

      转发自http://www.ruanyifeng.com/blog/2009/08/learning_javascript_closures.html       一.变量的作用域 要理解闭包,首 ...

  9. JS组件系列——BootstrapTable 行内编辑解决方案：x-editable

    前言:之前介绍bootstrapTable组件的时候有提到它的行内编辑功能,只不过为了展示功能,将此一笔带过了,罪过罪过!最近项目里面还是打算将行内编辑用起来,于是再次研究了下x-editable组件 ...

随机推荐

  1. dubbo 学习1

    1.高性能优秀的服务框架,应用可通过高性能的RPC实现服务的输出和输入功能,可以和spring框架无缝集成. 2.主要核心部件 a.remoting 网络通信框架 实现了sync-over-asnc ...

  2. 混合图(dizzy.pas/cpp/c)

    混合图(dizzy.pas/cpp/c) [题目描述] Hzwer神犇最近又征服了一个国家,然后接下来却也遇见了一个难题. Hzwer的国家有n个点,m条边,而作为国王,他十分喜欢游览自己的国家.他一 ...

  3. Spring/Maven/MyBatis配置文件结合properties文件使用

    使用properties文件也叫注入,比如把一些常用的配置项写入到这个文件,然后在Spring的XML配置文件中使用EL表达式去获取. 这种方式不只Spring可以使用,同样MyBatis也可以使用, ...

  4. 简单的事件处理类Event

    class Event{ constructor(){ this.handlers=[] } on(type,fn){ //订阅事件 if(!this.handlers[type]){ this.ha ...

  5. Android学习路线（十八）支持不同设备——支持不同的屏幕

    Android系统使用两个普通属性:尺寸和密度,来对设备屏幕进行分类. 你须要先预測你的应用将会在什么样屏幕的设备上安装,包含屏幕尺寸和密度.这种话,你就须要提供一些可选的资源类让你的应用在不同屏幕的 ...

  6. 万能存储工具类SDCard存储 /data/data/存储 assets存储 raw存储

    万能存储工具类 SDCard存储  /data/data/存储  assets存储 raw存储 粘贴过去就能够用了 <uses-permission android:name="and ...

  7. Unity3d PBR海水渲染

    三层水 博主近期渲染:近期用unity5弄的一些渲染 ---- by wolf96  http://blog.csdn.net/wolf96

  8. Linux声卡驱动移植和測试

    一.分析驱动程序,依据开发板改动代码 代码太长,就不贴了,几个注意点: 1. 查看开发板原理图和S3C2410的datasheet,UDA1341的L3MODE.L3DATA.L3CLOCK分别与S3 ...

  9. 浅析Netty原理

  10. Android SDK中的Support兼容包详解

    这篇文章主要介绍了Android SDK中的Support兼容包详解,本文详细区分了Support Library的版本区别.各种Theme的概念和使用注意事项等内容,需要的朋友可以参考下 背景 来自 ...