在旧的html文件中测试onBlur属性，未定义的处理函数消息

编程问答 2022-06-05

问题描述

我从Javascript书中获得以下HTML文件：

<!DOCTYPE html>
<html>
  <head>
    <title>JavaScript &amp; jQuery - Chapter 6: Events - Event Listener</title>
    <link rel="stylesheet" href="css/c06.css" />
  </head>
  <body>
    <div id="page">
      <h1>List King</h1>
      <h2>New Account</h2>
      <form method="post" action="http://www.example.org/register">

        <label for="username">Create a username: </label>
        <input type="text" id="username" onblur="checkUsername()"/>
        <div id="feedback"></div>

        <label for="password">Create a password: </label>
        <input type="password" id="password" />

        <input type="submit" value="sign up" />

      </form>
    </div>
    <script src="js/event-listener.js"></script>
  </body>
</html>

和javascript文件：

function checkUsername() {                             // Declare function
  var elMsg = document.getElementById('feedback');     // Get feedback element
  var elUsername = document.getElementById('username');// Get username input
  if (elUsername.value.length < 5) {                   // If username too short
    elMsg.textContent = 'Username must be 5 characters or more'; // Set msg
  } else {                                              // Otherwise
    elMsg.textContent = '';                             // Clear message
  }
}

和开玩笑的测试：

const fs3 = require('fs');
const path3 = require('path');
const html3 = fs3.readFileSync(path3.resolve(__dirname,'../event-attributes-post.html'),'utf8');

describe('checkEventAttributes',function () {
    beforeEach(async() => {
        document.documentElement.innerHTML = html3.toString();
    });

    it('testOnBlurHandlerAttribute',() => {
    console.log('start of onblur test');
    var inputit = document.getElementById('username');
    
    expect(inputit.value).toBe('');

    const checkUsername = require('../js/event-attributes-post.js');

    inputit.focus();
    inputit.value = "123";
    inputit.blur();
    
    expect(inputit.value).toBe('123');
    
    var feedback = document.getElementById('feedback');
    expect(feedback.textContent).toBe('Username must be 5 characters or more');
    });
});

我进行测试时得到

错误：未捕获[ReferenceError：未定义checkUsername]

当我在元素上调用blur（）时，我得到了未定义的消息，因此看起来像是在开玩笑地试图调用该函数，但是由于某种原因它不可见或未定义。

当我使用DOM事件处理程序和事件侦听器而不是HTML甚至处理程序属性时，一切正常。 仅仅是HTML事件处理程序属性已被弃用，而JEST不能再与之兼容吗？

解决方法

暂无找到可以解决该程序问题的有效方法，小编努力寻找整理中！

如果你已经找到好的解决方法，欢迎将解决方案带上本链接一起发送给小编。

小编邮箱:dio#foxmail.com (将#修改为@）

eventhandlerjavascriptjestjsonblurundefined